@medyll/idae-machine 0.129.0 → 0.135.2

package/dist/ui/CollectionList.svelte

@@ -1,95 +1,100 @@
-<script lang="ts" generics="COL = Record<string,any>">
-	import {
-		type MenuListProps,
-		Button,
-		MenuList,
-		MenuListItem,
-		openWindow,
-		type Props,
-		Looper
-	} from '@medyll/idae-slotui-svelte';
-	import CreateUpdate from '../form/CreateUpdate.svelte'; 
-	import { hydrate, type Snippet } from 'svelte';
-	import type { Where } from '@medyll/idae-idbql';
-
-import {machine } from '../main/machine.js';
-
-
-	interface DataListProps {
-		collection:     string;
-		target?:        string; // html target
-		data?:          COL;
-		menuListProps?: MenuListProps;
-		style?:         string;
-		displayMode?:   'line' | 'grid';
-		where?:         Where<COL>;
-		children?:      Snippet;
-		onclick?:       (data: COL, index: number | string) => void;
-	}
-
-	let {
-		collection,
-		target,
-		data,
-		menuListProps,
-		onclick,
-		style,
-		where,
-		children: _children,
-		displayMode
-	}: DataListProps = $props();
-
-	let collections = machine.collections;
-	let store = machine.store;
-	let fieldValues = machine.collections.collection(collection).collectionValues() ;
-	let index = collections.collection(collection).getIndexName();
-
-	let qy = $derived(where ? store[collection].where(where) : store[collection].getAll());
-
-	function load(event: CustomEvent, indexV: number | string) {
-		openCrud(event[index]);
-	}
-
-	function openCrud(id: any) {
-		// mount on target, returns component
-		let mounted = hydrate(CreateUpdate, {
-			target: document.querySelector(`[data-target-zone="${target}"]`),
-			props:  { collection: collection, dataId: id, mode: 'show' }
-		});
-
-		return mounted;
-	}
-
-	const _onclick = (data: COL, index: number | string) => {
-		console.log('onclick', data, index);
-
-		if (onclick) {
-			onclick(data, index);
-		} else {
-			load(data, index);
-		}
-	};
-</script>
-
-<div class="grid grid-cols-3 gap-3 p-3">
-	<Looper data={qy}>
-		{#snippet loopTitle()}
-			{@render _children?.()}
-		{/snippet}
-		{#snippet children({ item })}
-			<div class="flex aspect-square flex-col rounded-2xl border border-gray-300 p-2">
-				<div class="flex-1">edit</div>
-				<a
-					href="/collections/{fieldValues.indexValue(item)}"
-					onclick={(event) => {
-						event.preventDefault();
-						_onclick?.(item, index);
-					}}
-				>
-					<div class="py-3">{fieldValues.presentation(item)}</div>
-					<div class="py-3">date {fieldValues.display('created_at', item)}</div>
-				</a>
-			</div>
-		{/snippet}
-	</Looper>
-</div>
+<!--
+CollectionList.svelte
+Svelte 5 collection list with Looper
+@role ui-list
+@prop {string} collection - Collection name
+@prop {object} [data] - Data object
+@prop {object} [menuListProps] - Menu props
+@prop {string} [target] - HTML target
+@prop {string} [style] - Custom style
+@prop {object} [where] - Query filter
+@prop {string} [displayMode] - Display mode
+@slot children (let:item) - Custom item rendering
+@slot loopTitle - Custom title rendering
+@event click - Emitted on item click
+-->
+
+
+<script lang="ts" generics="COL = Record<string,any>">
+	import {
+		type MenuListProps,
+		Looper
+	} from '@medyll/idae-slotui-svelte';
+	import CreateUpdate from '../form/CreateUpdate.svelte';
+	import { hydrate } from 'svelte';
+	import type { Where } from '@medyll/idae-idbql';
+	import { machine } from '../main/machine.js'; 
+	import CollectionListFieldValues from './CollectionListFieldValues.svelte';
+
+	interface CollectionListProps  {
+		collection:     string;
+		target?:        string;
+		data?:          COL;
+		menuListProps?: MenuListProps;
+		style?:         string;
+		displayMode?:   'line' | 'grid';
+		where?:         Where<COL>;
+		children?:      any;
+		onclick?:       (data: COL, index: number | string) => void;
+	}
+	let {
+		collection,
+		target,
+		onclick,
+		where,
+		children: _children,
+	} = $props<CollectionListProps>();
+	
+	let logic = machine.logic;
+	let store = machine.store;
+	let fieldValues = $derived(logic.collection(collection).collectionValues);
+	let index = $derived(logic.collection(collection).template.index);
+	let query = $derived(where ? store[collection].where(where) : store[collection]?.getAll());
+
+	$inspect('CollectionList', { collection, query });
+
+
+
+	function load(event: CustomEvent, indexV: number | string) {
+		openCrud(event[index]);
+	}
+
+	function openCrud(id: any) {
+		// mount on target, returns component
+		let mounted = hydrate(CreateUpdate, {
+			target: document.querySelector(`[data-target-zone="${target}"]`),
+			props:  { collection: collection, dataId: id, mode: 'show' }
+		});
+
+		return mounted;
+	}
+
+	const _onclick = (data: COL, index: number | string) => {
+		console.log('onclick', data, index);
+
+		if (onclick) {
+			onclick(data, index);
+		} else {
+			load(data, index);
+		}
+	};
+
+</script>
+
+
+<div class="grid grid-cols-3 gap-3 p-3">
+	<Looper data={query}>
+		{#snippet loopTitle()}
+			<!-- Default: nothing -->
+		{/snippet}
+		{#snippet children({item, idx})}
+			<div class="flex aspect-square flex-col rounded-2xl border border-gray-300 p-2">
+					<CollectionListFieldValues
+						collection={collection}
+						data={item}
+						mode="show"
+				/>
+			</div>
+		{/snippet}
+	</Looper>
+</div>

package/dist/ui/CollectionList.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type MenuListProps } from '@medyll/idae-slotui-svelte';
-import { type Snippet } from 'svelte';
 import type { Where } from '@medyll/idae-idbql';
 declare function $$render<COL = Record<string, any>>(): {
     props: {
@@ -10,7 +9,7 @@ declare function $$render<COL = Record<string, any>>(): {
         style?: string;
         displayMode?: "line" | "grid";
         where?: Where<COL>;
-        children?: Snippet;
+        children?: any;
         onclick?: (data: COL, index: number | string) => void;
     };
     exports: {};

package/dist/ui/CollectionListFieldValues.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    /**
+     * @component
+     * Iterates over a collection's fields and renders a FieldValue for each.
+     * Supports filtering via `showFields` and dynamic discovery via `scheme` or `data`.
+     */
+    import FieldValue from "../form/FieldValue.svelte";
+    import { machine } from "../main/machine.js";
+
+    /**
+     * @typedef {Object} Props
+     * @property {string} collection - The name of the collection being rendered.
+     * @property {Record<string, any>} data - The data object for the fields (bindable).
+     * @property {"show" | "edit"} [mode="show"] - Display mode of the fields.
+     * @property {MachineScheme} [scheme] - The machine scheme defining field metadata.
+     * @property {string[]} [showFields] - Optional whitelist of field names to display.
+     */
+    let {
+      collection,
+      data = $bindable(),
+      mode = "show",
+      showFields
+    } = $props<{
+      collection: string;
+      data: Record<string, any>;
+      mode?: "show" | "edit";
+      showFields?: string[];
+    }>();
+
+    // Svelte 5: $derived must be called as a function in template
+    const scheme = $derived(machine.logic.collection(collection));
+    const fieldNames = $derived(() => {
+      const fields = scheme?.template?.fields;
+      if (fields) {
+        let keys = Object.keys(fields);
+        if (showFields && Array.isArray(showFields)) {
+          return keys.filter((key) => showFields.includes(key));
+        }
+        return keys;
+      }
+      return [];
+    });
+
+    // Map 'edit' to 'update' for FieldValue
+    const fieldMode = $derived(() => mode === 'edit' ? 'update' : mode);
+  </script>
+  
+  {#if scheme && fieldNames()?.length}
+    {#each fieldNames() as fieldName}
+      {#if scheme.template?.fields && scheme.template.fields[fieldName]}
+        <FieldValue
+          {collection}
+          {fieldName}
+          bind:data={data}
+          mode={fieldMode()}
+        />
+      {/if}
+    {/each}
+  {/if}

package/dist/ui/CollectionListFieldValues.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    collection: string;
+    data: Record<string, any>;
+    mode?: "show" | "edit";
+    showFields?: string[];
+};
+declare const CollectionListFieldValues: import("svelte").Component<$$ComponentProps, {}, "data">;
+type CollectionListFieldValues = ReturnType<typeof CollectionListFieldValues>;
+export default CollectionListFieldValues;

package/dist/ui/CollectionListMenu.svelte

@@ -1,47 +1,39 @@
-<script lang="ts" generics="COL = Record<string,any>">
-	import { type MenuListProps, Button, MenuList, MenuListItem, openWindow, type Props } from '@medyll/idae-slotui-svelte';
-	import CreateUpdate from '../form/CreateUpdate.svelte';
-	import { idbqlState } from '../db/dbSchema.js';
-	import { MachineDb } from '../main/machineDb.js';
-	import { IDbCollectionValues } from '../main/IDbCollectionValues';
-	import { hydrate } from 'svelte';
-	import type { Where } from '@medyll/idae-idbql';
-
-	interface DataListMenuProps {
-		collection:     string;
-		target?:        string; // html target
-		data?:          COL;
-		menuListProps?: MenuListProps;
-		style?:         string;
-		where?:         Where<COL>;
-		onclick?:       (event: CustomEvent, index: number) => void;
-	}
-
-	let { collection, target, data, menuListProps, onclick, style, where }: DataListMenuProps = $props();
-
-	let test = new MachineDb();
-	let fieldValues = new IDbCollectionValues(collection);
-	let index = test.getIndexName(collection);
-
-	let qy = $derived(where ? idbqlState[collection].where(where) : idbqlState[collection].getAll());
-
-	function load(event: CustomEvent, indexV: number) {
-		openCrud(event[index]);
-	}
-
-	function openCrud(id: any) {
-		// mount on target, returns component
-		let mounted = hydrate(CreateUpdate, {
-			target: document.querySelector(`[data-target-zone="${target}"]`),
-			props:  { collection: collection, dataId: id, mode: 'update' }
-		});
-
-		return mounted;
-	}
-</script>
-
-<MenuList {style} onclick={onclick ?? load} data={qy} {...menuListProps}>
-	{#snippet children({ item })}
-		<MenuListItem data={item}>{fieldValues.presentation(item)}</MenuListItem>
-	{/snippet}
-</MenuList>
+<!--
+CollectionListMenu.svelte
+Svelte 5 menu list for a collection
+@role ui-menu
+@prop {string} collection - Collection name
+@prop {object} [data] - Data object
+@prop {object} [menuListProps] - Menu props
+@prop {string} [target] - HTML target
+@prop {string} [style] - Custom style
+@prop {object} [where] - Query filter
+@slot children (let:item) - Custom menu item rendering
+@event click - Emitted on item click
+-->
+
+<script lang="ts" generics="COL = Record<string,any>">
+	import { type MenuListProps, MenuList, MenuListItem } from '@medyll/idae-slotui-svelte';
+	import CreateUpdate from '../form/CreateUpdate.svelte';
+	import { hydrate } from 'svelte';
+	import type { Where } from '@medyll/idae-idbql';
+	let { collection, target, data, menuListProps, onclick, style, where } = $props<{ collection: string; target?: string; data?: COL[]; menuListProps?: MenuListProps; style?: string; where?: Where<COL>; onclick?: (event: CustomEvent, index: number) => void }>();
+	// If data is provided, use it directly. Otherwise, expect parent to provide data via prop or slot.
+	let items = data ?? [];
+	function load(event: CustomEvent, indexV: number) {
+		openCrud(event[index]);
+	}
+	function openCrud(id: any) {
+		let mounted = hydrate(CreateUpdate, {
+			target: document.querySelector(`[data-target-zone="${target}"]`),
+			props:  { collection, dataId: id, mode: 'update' }
+		});
+		return mounted;
+	}
+</script>
+
+<MenuList {style} onclick={onclick ?? load} data={items} {...menuListProps}>
+	{#snippet children(item)}
+		<MenuListItem data={item}>{item && item.name ? item.name : ''}</MenuListItem>
+	{/snippet}
+</MenuList>

package/dist/ui/CollectionListMenu.svelte.d.ts

@@ -4,7 +4,7 @@ declare function $$render<COL = Record<string, any>>(): {
     props: {
         collection: string;
         target?: string;
-        data?: COL;
+        data?: COL[];
         menuListProps?: MenuListProps;
         style?: string;
         where?: Where<COL>;

package/dist/ui/CollectionReverseFks.svelte

@@ -1,56 +1,37 @@
-<!-- 
-    Component CollectionReverseFks.svelte :  to display a list of reverse foreign keys for a specific collection.
-    D:\boulot\python\wollama\src\components\form\CollectionReverseFks.svelte
-
-    (alias) type Tpl<T = TplCollectionFields> = {
-    index: string;
-    presentation: string | number | symbol;
-    fields: { [K in keyof T]: TplFieldRules; };
-    fks: { [K in TplCollectionName]?: {
-        code: K;
-        multiple: boolean;
-        rules: CombinedArgs;
-    }; };
-    } 
- -->
-<script lang="ts">
-	import { MachineDb } from '../main/machineDb.js';
-	import { schemeModelDb, idbqlState } from '../db/dbSchema.js';
-	import type { Tpl, TplCollectionName, Where } from '@medyll/idae-idbql';
-	import { Looper } from '@medyll/idae-slotui-svelte';
-	import type { Snippet, SvelteComponent } from 'svelte';
-
-	type CollectionFksProps = {
-		collection:      TplCollectionName;
-		collectionId?:   any;
-		where?:          Where;
-		children:        Snippet<[{ collection: string; template: Tpl }]>;
-		showTitle?:      boolean | string;
-		component?:      typeof SvelteComponent;
-		componentProps?: Record<string, any>;
-	};
-	let { collection, children: child, showTitle = false, component, componentProps = {} }: CollectionFksProps = $props();
-	const dbFields = new MachineDb(schemeModelDb);
-	const fks = $derived(dbFields.reverseFks(collection));
-
-	function getTitle() {
-		if (typeof showTitle === 'string') return showTitle;
-		return showTitle ? `Related ${collection}` : '';
-	}
-</script>
-
-<Looper data={Object.entries(fks)}>
-	{#snippet children({ item })}
-		{#if showTitle}
-			<div class="p2 font-bold">{item?.[0]}</div>
-		{/if}
-		{#if component}
-			<svelte:component this={component} collection={item[0]} template={item[1]} {...componentProps} />
-		{:else}
-			{@render child({
-				collection: item[0],
-				template: item[1]
-			})}
-		{/if}
-	{/snippet}
-</Looper>
+<!--
+CollectionReverseFks.svelte
+Svelte 5 reverse FK relation viewer for a collection
+@role ui-fragment
+@prop {string} collection - Collection name
+@prop {any} [collectionId] - Optional collection id
+@prop {object} [where] - Optional filter
+@prop {boolean|string} [showTitle] - Show or override title
+@prop {typeof SvelteComponent} [component] - Custom component
+@prop {object} [componentProps] - Props for custom component
+@slot children (let:collection, let:template) - Custom reverse FK rendering
+-->
+<script lang="ts">
+	import type { Tpl, TplCollectionName, Where } from '@medyll/idae-idbql';
+	import { Looper } from '@medyll/idae-slotui-svelte';
+	import type { SvelteComponent } from 'svelte';
+	import { machine } from '../main/machine.js';
+	let { collection, showTitle = false, component, componentProps = {}, children: child } = $props<{ collection: TplCollectionName; collectionId?: any; where?: Where; showTitle?: boolean | string; component?: typeof SvelteComponent; componentProps?: Record<string, any>; children?: any }>();
+	const reverseFks = $derived(machine.logic.collection(collection).parseReverseFks());
+	function getTitle() {
+		if (typeof showTitle === 'string') return showTitle;
+		return showTitle ? `Related ${collection}` : '';
+	}
+</script>
+
+<Looper data={Object.entries(reverseFks)}>
+	{#snippet children(collection, template)}
+		{#if showTitle}
+			<div class="p2 font-bold">{collection}</div>
+		{/if}
+		{#if component}
+			<svelte:component this={component} collection={collection} template={template} {...componentProps} />
+		{:else}
+			{@render child(collection, template)}
+		{/if}
+	{/snippet}
+</Looper>

package/dist/ui/CollectionReverseFks.svelte.d.ts

@@ -1,18 +1,14 @@
 import { SvelteComponent } from "svelte";
-import type { Tpl, TplCollectionName, Where } from '@medyll/idae-idbql';
-import type { Snippet } from 'svelte';
-type CollectionFksProps = {
+import type { TplCollectionName, Where } from '@medyll/idae-idbql';
+type $$ComponentProps = {
     collection: TplCollectionName;
     collectionId?: any;
     where?: Where;
-    children: Snippet<[{
-        collection: string;
-        template: Tpl;
-    }]>;
     showTitle?: boolean | string;
     component?: typeof SvelteComponent;
     componentProps?: Record<string, any>;
+    children?: any;
 };
-declare const CollectionReverseFks: import("svelte").Component<CollectionFksProps, {}, "">;
+declare const CollectionReverseFks: import("svelte").Component<$$ComponentProps, {}, "">;
 type CollectionReverseFks = ReturnType<typeof CollectionReverseFks>;
 export default CollectionReverseFks;

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@medyll/idae-machine",
-  "version": "0.129.0",
+  "bin": {
+    "idae-machine": "./cli.js"
+  },
+  "version": "0.135.2",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -12,6 +15,11 @@
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
+  "author": "Lebrun Meddy",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/medyll/idae.git"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -21,9 +29,14 @@
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
+  "publishConfig": {
+    "access": "public",
+    "directory": "."
+  },
   "devDependencies": {
     "@eslint/compat": "^1.2.7",
     "@eslint/js": "^9.23.0",
+    "@semantic-release/github": "^10.3.5",
     "@sveltejs/adapter-auto": "^5.0.0",
     "@sveltejs/kit": "^2.20.2",
     "@sveltejs/package": "^2.3.10",
@@ -44,13 +57,13 @@
     "typescript-eslint": "^8.28.0",
     "vite": "^6.2.3",
     "vitest": "^3.0.9",
-    "@medyll/idae-prettier-config": "1.2.1"
+    "@medyll/idae-eslint-config": "0.1.5"
   },
   "scope": "@medyll",
   "dependencies": {
     "@huggingface/prettier-plugin-vertical-align": "^0.2.3",
-    "@medyll/idae-slotui-svelte": "0.182.0",
-    "@medyll/idae-idbql": "0.179.0"
+    "@medyll/idae-slotui-svelte": "0.181.4",
+    "@medyll/idae-idbql": "0.185.2"
   },
   "scripts": {
     "dev": "vite dev",
@@ -62,6 +75,6 @@
     "lint": "prettier --check . && eslint .",
     "test:unit": "vitest",
     "test": "npm run test:unit -- --run",
-    "package:pre": "node scripts/package-pre.js"
+    "prepackage": "node scripts/package-pre.js"
   }
 }