@supersoniks/concorde 3.1.61 → 3.1.62

package/src/core/components/functional/list/list.ts

@@ -37,7 +37,7 @@ const tagName = "sonic-list";
  * *
  */
 export type ListItemMetadata = {
-  key?: string;
+  key?: string | number;
   even?: boolean;
   odd?: boolean;
   onlyChild?: boolean;
@@ -45,6 +45,12 @@ export type ListItemMetadata = {
   lastChild?: boolean;
 };
 
+// Simplifier le type ListItems pour n'être qu'une fonction
+export type ListItems = (
+  item: any,
+  metadata: ListItemMetadata
+) => DirectiveResult;
+
 @customElement(tagName)
 export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
   @property({ type: Object }) itemPropertyMap?: object;
@@ -63,6 +69,10 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
   @property() limit = Number.POSITIVE_INFINITY;
   @property() offset = 0;
 
+  @property({ type: Object }) items?: ListItems;
+  @property({ type: Object }) noItems?: () => DirectiveResult;
+  @property({ type: Object }) skeleton?: () => DirectiveResult;
+
   connectedCallback() {
     this.noShadowDom = "";
     this.defferedDebug = this.hasAttribute("debug") || null;
@@ -84,6 +94,9 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     return html`<sonic-loader mode=${loader}></sonic-loader>`;
   }
   renderSkeleton() {
+    if (this.skeleton) {
+      return this.skeleton();
+    }
     const template = this.templateParts["skeleton"];
     if (!(this.isLoading && template)) return nothing;
     return templateContent(template) as DirectiveResult;
@@ -207,6 +220,23 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     `;
   }
 
+  private handleProgrammaticTemplates(
+    item: any,
+    metadata: ListItemMetadata,
+    key: string | number
+  ): DirectiveResult | null {
+    if (!this.items) return null;
+
+    return html`<sonic-subscriber
+      ?debug=${this.defferedDebug === true}
+      .bindPublisher=${() => this.publisher[key]}
+      .propertyMap?=${this.itemPropertyMap}
+      dataProvider="${this.dataProvider}/list-item/${key}"
+    >
+      ${this.items(item, metadata)}
+    </sonic-subscriber>`;
+  }
+
   renderContent() {
     /**
      * Loading
@@ -231,11 +261,19 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
 
     const props = this.formatProps();
     /**
-     *  On peut définir un template spécifique si le résultat est un tableau vide
+     * On peut définir un template spécifique si le résultat est un tableau vide
      */
-    if ((props?.length || 0) == 0 && this.templateParts["no-item"]) {
-      return templateContent(this.templateParts["no-item"]);
+    if ((props?.length || 0) == 0) {
+      if (this.noItems) {
+        return this.noItems();
+      }
+      this.templateParts["no-items"] =
+        this.templateParts["no-items"] || this.templateParts["no-item"];
+      if (this.templateParts["no-items"]) {
+        return templateContent(this.templateParts["no-items"]);
+      }
     }
+
     /**
      * Rendu des lignes
      *  */
@@ -250,29 +288,25 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     return html`
       ${items?.map((item, index: number) => {
         if (item == null) return nothing;
-        let templatePart: HTMLTemplateElement | null = null;
         let key: number | string = index;
+        let templatePart: HTMLTemplateElement | null = null;
 
         if (typeof item == "object" && !Array.isArray(item)) {
+          if (extractValues) key = item?.["key"] as number | string;
+          // Récupérer le template par son nom si présent
           const templatePartName = item[this.templateKey];
           if (templatePartName && typeof templatePartName == "string") {
             templatePart = this.templateParts[templatePartName];
           }
-          if (extractValues) key = item?.["key"] as number | string;
         }
         if (key == "_sonic_http_response_") return nothing;
         if (typeof key != "string" && typeof key != "number") return nothing;
+
         const isLastChild = index >= length - 1;
         const indexMod2 = index % 2;
         const childPublisher = this.publisher[key];
-        /**
-         * Ajout de metatdonnées au publisher de l'enfant
-         */
-        //La prop key est gardée pour le moment pour compatibilité
-        //TODO : supprimer la prop key cquand c'est ok côté covoit.
-        childPublisher._key_ = key + "";
-        childPublisher._metadata_ = {
-          ...childPublisher._metadata_.get(), //Si il y a d'autres données.
+
+        const metadata: ListItemMetadata = {
           key: key,
           even: indexMod2 == 0,
           odd: indexMod2 == 1,
@@ -280,26 +314,43 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
           firstChild: index == 0,
           lastChild: isLastChild,
         };
+
+        childPublisher._key_ = key + "";
+        childPublisher._metadata_ = {
+          ...childPublisher._metadata_.get(),
+          ...metadata,
+        };
+
+        // Essayer d'utiliser les templates programmatiques
+        const programmaticTemplate = this.handleProgrammaticTemplates(
+          item,
+          metadata,
+          key
+        );
+        if (programmaticTemplate) {
+          return html`${programmaticTemplate}${separator && !isLastChild
+            ? templateContent(separator)
+            : nothing}`;
+        }
+
+        // Sinon, utiliser le système de template existant
         counter++;
         if (templatePart) counter = -1;
-        return (
-          item &&
-          html`
-            <sonic-subscriber
-              ?debug=${this.defferedDebug === true}
-              .bindPublisher=${function () {
-                return childPublisher;
-              }}
-              .propertyMap?=${this.itemPropertyMap}
-              dataProvider="${this.dataProvider}/list-item/${key}"
-            >
-              ${templatePart
-                ? templateContent(templatePart)
-                : templateContent(this.templateList[counter % templateCount])}
-            </sonic-subscriber>
-            ${separator && !isLastChild ? templateContent(separator) : nothing}
-          `
-        );
+        return html`
+          <sonic-subscriber
+            ?debug=${this.defferedDebug === true}
+            .bindPublisher=${function () {
+              return childPublisher;
+            }}
+            .propertyMap?=${this.itemPropertyMap}
+            dataProvider="${this.dataProvider}/list-item/${key}"
+          >
+            ${templatePart
+              ? templateContent(templatePart)
+              : templateContent(this.templateList[counter % templateCount])}
+          </sonic-subscriber>
+          ${separator && !isLastChild ? templateContent(separator) : nothing}
+        `;
       })}
     `;
   }

package/src/core/components/functional/queue/queue.demo.ts

@@ -0,0 +1,38 @@
+import { LitElement } from "lit";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import "./queue";
+import { tailwind } from "../../../../docs/tailwind";
+
+@customElement("sonic-queue-demo")
+export class QueueDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = (item: any) => html`
+    <div class="bg-neutral-100 p-2 rounded-md">
+      <div class="font-medium">${item.nom}</div>
+      <div class="text-sm text-gray-600">Code: ${item.code}</div>
+    </div>
+  `;
+  private noItems = () => html`
+    <div class="flex flex-col items-center justify-center p-4 text-gray-500">
+      <p>Aucune commune trouvée</p>
+    </div>
+  `;
+
+  render() {
+    return html`
+      <div class="p-4">
+        <h2 class="text-xl font-medium mb-4">Liste des communes</h2>
+        <sonic-queue
+          class="grid grid-cols-3 gap-3"
+          serviceurl="https://geo.api.gouv.fr/"
+          dataproviderexpression="communes?limit=$limit"
+          limit="30"
+          .items=${this.items}
+          .noItems=${this.noItems}
+        ></sonic-queue>
+      </div>
+    `;
+  }
+}

package/src/core/components/functional/queue/queue.ts

@@ -6,6 +6,7 @@ import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProx
 import "@supersoniks/concorde/core/components/functional/list/list";
 import { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { HTML } from "@supersoniks/concorde/utils";
+import { ListItems } from "@supersoniks/concorde/core/components/functional/list/list";
 
 type QueueItem = {
   id: string;
@@ -32,6 +33,9 @@ const tagName = "sonic-queue";
 export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
   @property({ type: Array }) templates: Array<HTMLTemplateElement> | null =
     null;
+  @property({ type: Object }) items: ListItems | null = null;
+  @property({ type: Object }) noItems: ListItems | null = null;
+  @property({ type: Object }) skeleton: ListItems | null = null;
   lastRequestTime = 0;
   key = "";
 
@@ -363,6 +367,9 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
             endPoint="${item.endPoint}"
             idKey=${this.idKey}
             .templates=${templates}
+            .items=${this.items}
+            .noItems=${this.noItems}
+            .skeleton=${this.skeleton}
           >
           </sonic-list>
         `;

package/src/core/components/functional/router/router.demo.ts

@@ -0,0 +1,62 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import "./router";
+import { Routes } from "@supersoniks/concorde/core/utils/route";
+
+import { tailwind } from "../../../../docs/tailwind";
+const defaultRoute = {
+  user: "#user/:id/:slug",
+};
+export type AppRoutes = typeof defaultRoute;
+
+Routes.register<AppRoutes>(defaultRoute);
+
+@customElement("sonic-router-demo")
+export class RouterDemo extends LitElement {
+  static styles = [tailwind];
+
+  @state()
+  private routes = {
+    "#home": () => html`
+      <div class="p-4 border border-gray-200 rounded-md">
+        <h1 class="text-xl font-medium mb-2">Accueil</h1>
+        <p class="text-gray-600">Bienvenue sur la démo du router</p>
+      </div>
+    `,
+    [defaultRoute.user]: ({ slug, id }: { id: string; slug: string }) => html`
+      <div class="p-4 border border-gray-200 rounded-md">
+        <h1 class="text-xl font-medium mb-2">Profil Utilisateur ${id}</h1>
+        <p class="text-gray-600">Slug: ${slug}</p>
+      </div>
+    `,
+    "#products/(\\d+)/(\\w+)": ([id, slug]: [string, string]) => html`
+      <div class="p-4 border border-gray-200 rounded-md">
+        <h1 class="text-xl font-medium mb-2">Produit ${id}</h1>
+        <p class="text-gray-600">Slug: ${slug}</p>
+      </div>
+    `,
+    fallback: () => html`
+      <div class="p-4 border border-red-200 bg-red-50 rounded-md">
+        <h1 class="text-xl font-medium text-red-800 mb-2">404</h1>
+        <p class="text-red-600">Page non trouvée</p>
+      </div>
+    `,
+  };
+
+  render() {
+    return html`
+      <div class="p-4">
+        <h2 class="text-2xl font-medium mb-6">Démo du router</h2>
+
+        <div class="flex gap-4 mb-6">
+          <sonic-button href="#home"> Accueil </sonic-button>
+          <sonic-button href="#user/123/mySlug"> Utilisateur 123 </sonic-button>
+          <sonic-button href="#products/456/mySlug"> Produit 456 </sonic-button>
+          <sonic-button href="#invalid"> 404 </sonic-button>
+        </div>
+
+        <sonic-router .routes=${this.routes}></sonic-router>
+      </div>
+    `;
+  }
+}

package/src/core/components/functional/router/router.md

@@ -105,4 +105,25 @@ We are then redirected to the url *#data-is-set* which does nothing in itself.
   </template>
 </sonic-code>
 
-Example of use : use with a router and a submit to manage the steps of login/logout, display of user info.
+Example of use : use with a router and a submit to manage the steps of login/logout, display of user info.
+
+## Fallback
+
+The fallback route is rendered when no other route matches the current location.
+
+<sonic-code>
+  <sonic-router>
+    <template data-route="#home">
+      <div>Home</div>
+    </template>
+    <template data-route="#fallback">
+      <div>Fallback</div>
+    </template>
+  </sonic-router>
+</sonic-code>
+
+## Programmatic routes
+
+
+
+

package/src/core/components/functional/router/router.spec.ts

@@ -0,0 +1,214 @@
+import { expect } from "vitest";
+import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
+import "./router";
+import { html } from "lit";
+import { Routes } from "@supersoniks/concorde/core/utils/route";
+
+function create(template = "", addToDocument = true) {
+  return TestUtils.bootstrap(
+    `
+    <sonic-router>
+      ${template}
+    </sonic-router>
+  `,
+    addToDocument
+  )[0];
+}
+
+describe("SonicRouter", () => {
+  it("devrait afficher le contenu du template avec une route regexp", async () => {
+    const elt: any = create(`
+      <template data-route="/utilisateur/\\d+">
+        <div>Page Utilisateur</div>
+      </template>
+    `);
+    elt.location = "/utilisateur/123";
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("Page Utilisateur");
+  });
+
+  it("devrait afficher le contenu avec dataProvider quand spécifié", async () => {
+    const elt: any = create(`
+      <template data-route="/utilisateur/(\\d+)" dataProviderExpression="/api/user/$1">
+        <div>Page Utilisateur</div>
+      </template>
+    `);
+    elt.location = "/utilisateur/123";
+    await elt.updated();
+    const divWrapper = elt.querySelector("div[dataProvider]");
+    expect(divWrapper.getAttribute("dataProvider")).toBe("/api/user/123");
+  });
+
+  it("devrait afficher le contenu du template avec url-pattern", async () => {
+    const elt: any = create(`
+      <template data-route="utilisateur/:id">
+        <div>Page Utilisateur Pattern</div>
+      </template>
+    `);
+    elt.location = "/utilisateur/123";
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("Page Utilisateur Pattern");
+  });
+
+  it("devrait afficher le fallback quand aucune route ne correspond", async () => {
+    const elt: any = create(`
+      <template data-route="/utilisateur/\\d+">
+        <div>Page Utilisateur</div>
+      </template>
+      <template data-fallback>
+        <div>Page 404</div>
+      </template>
+    `);
+    elt.location = "/page-inexistante";
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("Page 404");
+  });
+
+  it("devrait mettre à jour le titre de la page quand spécifié", async () => {
+    const elt: any = create(`
+      <template data-route="/accueil" title="Page d'accueil">
+        <div>Accueil</div>
+      </template>
+    `);
+    elt.location = "/accueil";
+    await elt.updated();
+    expect(document.title).toBe("Page d'accueil");
+  });
+
+  it("devrait gérer plusieurs templates correspondants", async () => {
+    const elt: any = create(`
+      <template data-route="/utilisateur">
+        <div>Base Utilisateur</div>
+      </template>
+      <template data-route="/utilisateur/(\\d+)">
+        <div>Détail Utilisateur</div>
+      </template>
+    `);
+    elt.location = "/utilisateur/123";
+    await elt.updated();
+    expect(elt.textContent.trim().replace(/\s+/gm, " ")).toBe(
+      "Base Utilisateur Détail Utilisateur"
+    );
+  });
+
+  it("devrait rediriger vers fallBackRoute si défini et aucune route ne correspond", async () => {
+    const elt: any = create(`
+      <template data-route="/utilisateur">
+        <div>Page Utilisateur</div>
+      </template>
+    `);
+    elt.fallBackRoute = "#/404";
+    document.location.href = "#/page-inexistante";
+    await elt.updated();
+    // On ne peut pas tester document.location.href directement à cause de jsdom
+    // Mais on peut vérifier que la propriété est bien définie
+    expect(document.location.href.replace(document.location.origin, "")).toBe(
+      "/#/404"
+    );
+  });
+
+  it("devrait gérer les templates fournis via l'attribut templates", async () => {
+    const elt: any = create("", false);
+    const template = document.createElement("template");
+    template.setAttribute("data-route", "/test");
+    template.innerHTML = "<div>Test Template</div>";
+    elt.templates = [template];
+    document.body.appendChild(elt);
+    elt.location = "/test";
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("Test Template");
+  });
+
+  it("devrait gérer le dataProvider avec url-pattern", async () => {
+    const elt: any = create(`
+      <template data-route="utilisateur/:id/profil/:section" dataProviderExpression="/api/user/:id/:section">
+        <div>Profil Utilisateur</div>
+      </template>
+    `);
+    elt.location = "/utilisateur/123/profil/preferences";
+    await elt.updated();
+    const divWrapper = elt.querySelector("div[dataProvider]");
+    expect(divWrapper.getAttribute("dataProvider")).toBe(
+      "/api/user/123/preferences"
+    );
+  });
+});
+
+describe("SonicRouter Programmatic", () => {
+  it("devrait supporter les routes programmées simples", async () => {
+    const elt: any = create();
+    const routes = {
+      home: () => html`<div>Accueil</div>`,
+      about: () => html`<div>À propos</div>`,
+      fallback: () => html`<div>404</div>`,
+    } satisfies Routes;
+
+    elt.routes = routes;
+    elt.location = "/home";
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("Accueil");
+  });
+
+  it("devrait supporter les paramètres avec url-pattern", async () => {
+    const elt: any = create("", false);
+    const routes = {
+      "user/:id/profile/:section": ({
+        id,
+        section,
+      }: {
+        id: number;
+        section: string;
+      }) => html` <div>Utilisateur ${id} - Section ${section}</div> `,
+    } satisfies Routes;
+
+    elt.routes = routes;
+    document.body.appendChild(elt);
+    elt.location = "/user/123/profile/settings";
+
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("Utilisateur 123 - Section settings");
+  });
+
+  it("devrait supporter les expressions régulières", async () => {
+    const elt: any = create();
+    const routes = {
+      "user/(\\d+)/post/(\\d+)": ([userId, postId]: number[]) =>
+        html` <div>User ${userId} Post ${postId}</div> `,
+    } satisfies Routes;
+
+    elt.routes = routes;
+    elt.location = "/user/123/post/456";
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("User 123 Post 456");
+  });
+
+  it("devrait utiliser le fallback quand aucune route ne correspond", async () => {
+    const elt: any = create();
+    const routes = {
+      home: () => html`<div>Accueil</div>`,
+      fallback: () => html`<div>Page Non Trouvée</div>`,
+    } satisfies Routes;
+
+    elt.routes = routes;
+    elt.location = "/invalid";
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("Page Non Trouvée");
+  });
+
+  it("devrait prioriser les routes programmées sur les templates HTML", async () => {
+    const elt: any = create(`
+      <template data-route="home">
+        <div>Accueil HTML</div>
+      </template>
+    `);
+
+    const routes = {
+      home: () => html`<div>Accueil Programmé</div>`,
+    } satisfies Routes;
+
+    elt.routes = routes;
+    elt.location = "/home";
+    await elt.updated();
+    expect(elt.textContent.trim()).toBe("Accueil Programmé");
+  });
+});