@supersoniks/concorde 3.2.5 → 3.2.8

package/src/core/components/ui/toast/toast.md

@@ -0,0 +1,166 @@
+# Toast
+
+## Utilisation de base
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Message de notification simple' })">
+      Afficher un toast
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Statut
+
+Les statuts disponibles sont : `success`, `error`, `warning`, `info` ou vide (par défaut).
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Message par défaut', status: '' })">
+        Default
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Opération réussie !', status: 'success' })">
+        Success
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Une erreur est survenue', status: 'error' })">
+        Error
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Attention à ce point', status: 'warning' })">
+        Warning
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Information importante', status: 'info' })">
+        Info
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Avec titre
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ title: 'Succès', text: 'Votre demande a été traitée avec succès.', status: 'success' })">
+        Toast avec titre
+      </sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ title: 'Test', text: 'Une erreur est survenue lors du traitement.', status: 'error' })">
+        Toast d'erreur avec titre
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Avec contenu HTML
+
+Le contenu du toast peut contenir du HTML.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Message avec <strong>HTML</strong> et un <a href=&quot;#&quot;>lien cliquable</a>', status: 'info' })">
+      Toast avec HTML
+    </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Persistance
+
+Par défaut, les toasts disparaissent automatiquement. Avec `preserve: true`, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Ce toast ne disparaîtra pas automatiquement', status: 'info', preserve: true })">
+      Toast persistant
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Masquer définitivement
+
+Avec `dismissForever: true` et un `id`, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ id: 'unique-toast-id', text: 'Ce toast peut être masqué définitivement', status: 'info', dismissForever: true })">
+      Toast avec dismiss forever
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Fantôme
+
+Avec `ghost: true`, le toast devient semi-transparent et non-interactif.
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ text: 'Toast fantôme (semi-transparent)', status: 'info', ghost: true })">
+      Toast ghost
+    </sonic-button>
+  </template>
+</sonic-code>
+
+
+## Méthodes de suppression
+
+### Tout supprimer
+
+Supprime tous les toasts sauf ceux marqués comme `ghost`.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 1', status: 'info' })">Ajouter toast 1</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 2', status: 'success' })">Ajouter toast 2</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 3', status: 'warning' })">Ajouter toast 3</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeAll()">Supprimer tous</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+### Supprimer par statut
+
+Supprime tous les toasts d'un statut spécifique.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast success', status: 'success' })">Success</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast error', status: 'error' })">Error</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast warning', status: 'warning' })">Warning</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeItemsByStatus('success')">Supprimer success</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeItemsByStatus('error')">Supprimer error</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+### Supprimer les éléments temporaires
+
+Supprime tous les toasts qui ne sont pas marqués comme `preserve`.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast temporaire', status: 'info' })">Temporaire</sonic-button>
+      <sonic-button onclick="window.SonicToast.add({ text: 'Toast persistant', status: 'success', preserve: true })">Persistant</sonic-button>
+      <sonic-button onclick="window.SonicToast.removeTemporaryItems()">Supprimer temporaires</sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Exemple complet
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="window.SonicToast.add({ 
+      id: 'welcome-toast',
+      title: 'Bienvenue',
+      text: 'Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.',
+      status: 'success',
+      dismissForever: true
+    })">
+      Toast complet
+    </sonic-button>
+  </template>
+</sonic-code>
+

package/src/core/components/ui/toast/toast.ts

@@ -56,7 +56,7 @@ export class SonicToast extends LitElement {
     SonicToast.handleExistingToastDelegation();
     if (!this.toasts) return nothing;
 
-    return html`<div aria-live="polite" style=${styleMap(styles)}>
+    return html`<div style=${styleMap(styles)}>
       ${repeat(
         this.toasts,
         (item) => item.id,

package/src/core/components/ui/tooltip/tooltip.ts

@@ -36,9 +36,8 @@ export class Tooltip extends LitElement {
         will-change: opacity, transform;
       }
 
-      /* désactive au focus-within cause persistance du tooltip au clic */
-      /* :host(:focus-within) .tooltip:before, */
       :host(:focus-visible) .tooltip:before,
+      :host(.keyboard-focus) .tooltip:before,
       .tooltip:hover:before {
         opacity: 1;
         scale: 1;
@@ -132,12 +131,78 @@ export class Tooltip extends LitElement {
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) focusable = false;
 
+  private lastKeyWasTab = false;
+  private boundHandleKeyDown: (e: KeyboardEvent) => void;
+  private boundHandleMouseDown: () => void;
+
+  constructor() {
+    super();
+    this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    this.boundHandleMouseDown = this.handleMouseDown.bind(this);
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    // Détecter si Tab ou Shift+Tab a été pressé
+    if (e.key === "Tab") {
+      this.lastKeyWasTab = true;
+    }
+  };
+
+  private handleMouseDown = () => {
+    // Réinitialiser le flag si la souris est utilisée
+    this.lastKeyWasTab = false;
+    // Retirer la classe si elle existe (au cas où)
+    this.classList.remove("keyboard-focus");
+  };
+
+  private handleFocusIn = () => {
+    // Ajouter la classe seulement si le focus est venu du clavier (Tab)
+    if (this.lastKeyWasTab) {
+      this.classList.add("keyboard-focus");
+    }
+    this.lastKeyWasTab = false;
+  };
+
+  private handleFocusOut = () => {
+    this.classList.remove("keyboard-focus");
+    this.lastKeyWasTab = false;
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
+    // Écouter les événements au niveau du document avec capture pour détecter Tab
+    document.addEventListener("keydown", this.boundHandleKeyDown, true);
+    document.addEventListener("mousedown", this.boundHandleMouseDown, true);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("focusin", this.handleFocusIn);
+    this.removeEventListener("focusout", this.handleFocusOut);
+    document.removeEventListener("keydown", this.boundHandleKeyDown, true);
+    document.removeEventListener("mousedown", this.boundHandleMouseDown, true);
+  }
+
   protected willUpdate(_changedProperties: PropertyValues): void {
     if (_changedProperties.has("disabled")) {
       const wasDisabledBefore = _changedProperties.get("disabled") === true;
       if (this.disabled) {
         this.setAttribute("tabindex", "-1");
+        this.classList.remove("keyboard-focus");
       } else if (!this.disabled && wasDisabledBefore) {
+        if (this.focusable) {
+          this.setAttribute("tabindex", "0");
+        } else {
+          this.removeAttribute("tabindex");
+        }
+      }
+    }
+    if (_changedProperties.has("focusable")) {
+      if (this.focusable && !this.disabled) {
+        this.setAttribute("tabindex", "0");
+      } else if (!this.focusable && !this.disabled) {
         this.removeAttribute("tabindex");
       }
     }

package/src/core/mixins/Fetcher.ts

@@ -121,6 +121,33 @@ const Fetcher = <
     @property({ type: Number }) refetchEveryMs = 0;
     refetchTimeOutId?: ReturnType<typeof setTimeout>;
 
+    /**
+     * _isFetching est une propriété sensée privée qui permet de savoir si un fetch est en cours
+     * Elle ne peut pas etre veritablement privée actuellement en raison d'une limitation contextuelle a traiter
+     */
+    _isFetching = false;
+
+    /**
+     * _mustRefetch est une propriété sensée privée qui permet de savoir si un fetch est en cours
+     * Elle ne peut pas etre veritablement privée actuellement en raison d'une limitation contextuelle a traiter
+     */
+    _mustRefetch = false;
+    handleStartFetching(): "fetching" | "okToFetch" {
+      if (this._isFetching) {
+        this._mustRefetch = true;
+        return "fetching";
+      }
+      this._isFetching = true;
+      return "okToFetch";
+    }
+
+    handleEndFetching() {
+      this._isFetching = false;
+      if (this._mustRefetch) {
+        this._mustRefetch = false;
+        this._fetchData();
+      }
+    }
     /**
      *
      * C'est ici que les données sont chargées via l'utilitaire API
@@ -156,10 +183,19 @@ const Fetcher = <
         });
       }
 
-      let data = await this.api.get<PropsType>(
-        this.endPoint || this.dataProvider || "",
-        headerData
-      );
+      const fetchStatus = this.handleStartFetching();
+      if (fetchStatus === "fetching") {
+        return;
+      }
+      let data = null;
+      try {
+        data = await this.api.get<PropsType>(
+          this.endPoint || this.dataProvider || "",
+          headerData
+        );
+      } catch (_error) {}
+
+      this.handleEndFetching();
 
       this.fetchedData = data;
       if (this.api.lastResult && !this.api.lastResult.ok) {

package/src/core/utils/HTML.ts

@@ -105,6 +105,7 @@ class HTML {
       ) as RequestCredentials) || undefined;
     const cache = (node as Element).getAttribute("cache") as RequestCache;
     const blockUntilDone = (node as Element).hasAttribute("blockUntilDone");
+    const keepAlive = (node as Element).hasAttribute("keepAlive");
     return {
       serviceURL,
       token,
@@ -116,6 +117,7 @@ class HTML {
       credentials,
       cache,
       blockUntilDone,
+      keepAlive,
     };
   }
 

package/src/core/utils/api.ts

@@ -17,6 +17,7 @@ export type APIConfiguration = {
   addHTTPResponse?: boolean;
   credentials?: RequestCredentials;
   cache?: RequestCache;
+  keepAlive?: boolean;
 };
 export type CallState = "loading" | "done" | "error" | undefined;
 export type ResultTypeInterface = CoreJSType & {
@@ -128,6 +129,7 @@ class API {
   lastResult?: Response;
   isServiceSimulated = false;
   blockUntilDone = false;
+  keepAlive = false;
   constructor(config: APIConfiguration) {
     this.serviceURL = config.serviceURL;
     this.blockUntilDone = config.blockUntilDone || false;
@@ -143,6 +145,7 @@ class API {
     this.addHTTPResponse = config.addHTTPResponse || false;
     this.credentials = config.credentials;
     this.cache = config.cache || "default";
+    this.keepAlive = config.keepAlive || false;
   }
   async handleResult(
     fetchResult: Response,
@@ -235,6 +238,7 @@ class API {
       {
         headers: headers,
         credentials: this.credentials,
+        keepalive: this.keepAlive,
       }
     );
 
@@ -384,6 +388,7 @@ class API {
             headers: headers,
             credentials: this.credentials,
             cache: this.cache,
+            keepalive: this.keepAlive,
           });
           const handledResult = await this.handleResult(result, lastCall);
           resolve(handledResult);
@@ -455,6 +460,7 @@ class API {
       credentials: this.credentials,
       method: method,
       body: JSON.stringify(data),
+      keepalive: this.keepAlive,
     });
     return (await this.handleResult(result, lastCall)) as T &
       ResultTypeInterface;
@@ -486,6 +492,7 @@ class API {
       credentials: this.credentials,
       method: method,
       body: formData,
+      keepalive: this.keepAlive,
     });
     return (await this.handleResult(result, lastCall)) as T &
       ResultTypeInterface;

package/src/docs/navigation/navigation.ts

@@ -127,7 +127,7 @@ export class DocsNavigation extends LitElement {
       href: "#core/components/ui/form/textarea/textarea.md/textarea",
     },
     { label: "Theme", href: "#" },
-    { label: "Toast", href: "#" },
+    { label: "Toast", href: "#core/components/ui/toast/toast.md/toast" },
     {
       label: "Tooltip",
       href: "#core/components/ui/tooltip/tooltip.md/tooltip",

package/src/docs/search/docs-search.json

@@ -2279,6 +2279,141 @@
       }
     }
   },
+  {
+    "search": "Toast",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "toast": {
+            "count": 1,
+            "title": "",
+            "type": "page"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Les statuts disponibles sont : success, error, warning, info ou vide (par défaut).\n",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "statut": {
+            "count": 1,
+            "title": "Statut",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Le contenu du toast peut contenir du HTML.\n",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "avec-contenu-html": {
+            "count": 1,
+            "title": "Avec contenu HTML",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Par défaut, les toasts disparaissent automatiquement. Avec preserve: true, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.\n",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "persistance": {
+            "count": 1,
+            "title": "Persistance",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Avec dismissForever: true et un id, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.\n",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "masquer-définitivement": {
+            "count": 1,
+            "title": "Masquer définitivement",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Avec ghost: true, le toast devient semi-transparent et non-interactif.\n",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "fantôme": {
+            "count": 1,
+            "title": "Fantôme",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Supprime tous les toasts sauf ceux marqués comme ghost.\n",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "tout-supprimer": {
+            "count": 1,
+            "title": "Tout supprimer",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Supprime tous les toasts d'un statut spécifique.\n",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "supprimer-par-statut": {
+            "count": 1,
+            "title": "Supprimer par statut",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Supprime tous les toasts qui ne sont pas marqués comme preserve.\n",
+    "files": {
+      "core/components/ui/toast/toast.md": {
+        "title": "Toast",
+        "hashes": {
+          "supprimer-les-éléments-temporaires": {
+            "count": 1,
+            "title": "Supprimer les éléments temporaires",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
   {
     "search": "Tooltip",
     "files": {