@supersoniks/concorde 3.2.2 → 3.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.2.2",
+  "version": "3.2.4",
   "license": "MIT",
   "type": "module",
   "main": "",

package/src/core/components/ui/icon/icons.ts

@@ -99,8 +99,13 @@ export default class Icons {
          * MiniCache de session
          */
         if (iconCache.icons[url]) {
-          libIcons[libIconsKey] = iconCache.icons[url];
-          return unsafeHTML(iconCache.icons[url]);
+          const cached = iconCache.icons[url];
+          const isSvgCached = /^\s*<svg[\s>]/i.test(cached || "");
+          if (isSvgCached) {
+            libIcons[libIconsKey] = cached;
+            return unsafeHTML(cached);
+          }
+          delete iconCache.icons[url];
         }
         /**
          * on utilise une promise mutualisée pour ne pas faire plusieurs appels concurents d'une même icone
@@ -128,11 +133,11 @@ export default class Icons {
                 const isSvg = /^\s*<svg[\s>]/i.test(text);
                 resolve(isSvg ? text : "");
               } catch (e) {
-                resolve(null);
+                resolve("");
               }
             } catch (error) {
               log("concorde icon loading error", params);
-              resolve(null);
+              resolve("");
             }
           });
           loadingGetPromises.set(url, promise as Promise<string>);
@@ -144,13 +149,16 @@ export default class Icons {
         loadingGetPromises.delete(url);
 
         libIcons[libIconsKey] = result || "";
-        iconCache.icons[url] = result || "";
+        if (result && /^\s*<svg[\s>]/i.test(result)) {
+          iconCache.icons[url] = result;
+          iconCache.names.push(url);
+        }
         if (iconCache.names.length > iconCacheMaxSize) {
           const key = iconCache.names.shift();
           delete iconCache.icons[key];
         }
         sessionStorage.setItem("sonicIconsCache", JSON.stringify(iconCache));
-        return unsafeHTML(result);
+        return result ? unsafeHTML(result) : "";
       }
       /**
        * svgs "locaux"

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

@@ -264,6 +264,36 @@
         <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
         History
       </sonic-menu-item>
+      <sonic-menu-item >
+        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
+        Orders
+      </sonic-menu-item>   <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
+        Home
+      </sonic-menu-item>
+      <sonic-menu-item>
+        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
+        Profile
+      </sonic-menu-item>
+      <sonic-menu-item >
+        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
+        History
+      </sonic-menu-item>
+      <sonic-menu-item >
+        <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
+        Orders
+      </sonic-menu-item>   <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
+        Home
+      </sonic-menu-item>
+      <sonic-menu-item>
+        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
+        Profile
+      </sonic-menu-item>
+      <sonic-menu-item >
+        <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
+        History
+      </sonic-menu-item>
       <sonic-menu-item >
         <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
         Orders
@@ -276,11 +306,22 @@
         <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
         Messages
       </sonic-menu-item>
-      <sonic-menu-item type="danger">
-        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
-        Log out
-      </sonic-menu-item>
-    </sonic-menu>
+      <sonic-menu slot="more">
+        <sonic-menu-item >
+          <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
+          Settings
+        </sonic-menu-item>
+        <sonic-menu-item >
+          <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
+          Messages
+        </sonic-menu-item>
+        <sonic-divider></sonic-divider>
+        <sonic-menu-item type="danger">
+          <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
+          Log out
+        </sonic-menu-item>
+      </sonic-menu>
+      
   </template>
 </sonic-code>
 

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

@@ -23,9 +23,8 @@ export class MenuItems extends LitElement {
 
       :host > menu {
         display: flex;
-        border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
+        padding: 0;
         margin: 0;
-        padding: 0.35em;
       }
 
       .hidden {
@@ -33,26 +32,36 @@ export class MenuItems extends LitElement {
       }
 
       /* SCROLLABLE*/
-      :host([scrollable]) {
+      #menu-content {
+        display: flex;
+        padding: 0.35em;
+        margin: 0;
+      }
+
+      :host([scrollable]) #menu-content {
         scrollbar-width: none;
+        max-width: 100%;
         -ms-overflow-style: none;
-      }
-      :host([scrollable]) menu > * {
         scroll-snap-align: start;
         white-space: nowrap;
+        border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
+        transition: mask-image 0.15s linear;
       }
-      :host([scrollable][direction="row"]) {
+
+      :host([scrollable][direction="row"]) #menu-content {
         overflow-x: scroll;
+        scroll-snap-align: start;
         scroll-snap-type: x mandatory;
       }
-      :host([scrollable][direction="column"]) {
+      :host([scrollable][direction="column"]) #menu-content {
         overflow-y: scroll;
+        scroll-snap-align: start;
         scroll-snap-type: y mandatory;
       }
       :host([scrollable])::-webkit-scrollbar {
         display: none !important;
       }
-      :host([scrollable][direction="row"].shadow-right) {
+      :host([scrollable][direction="row"].shadow-right) #menu-content {
         -webkit-mask-image: linear-gradient(
           to left,
           rgba(0, 0, 0, 0),
@@ -64,7 +73,7 @@ export class MenuItems extends LitElement {
           rgba(0, 0, 0, 1) 10%
         );
       }
-      :host([scrollable][direction="row"].shadow-left) {
+      :host([scrollable][direction="row"].shadow-left) #menu-content {
         -webkit-mask-image: linear-gradient(
           to right,
           rgba(0, 0, 0, 0),
@@ -76,7 +85,8 @@ export class MenuItems extends LitElement {
           rgba(0, 0, 0, 1) 10%
         );
       }
-      :host([scrollable][direction="row"].shadow-left.shadow-right) {
+      :host([scrollable][direction="row"].shadow-left.shadow-right)
+        #menu-content {
         -webkit-mask-image: linear-gradient(
           to right,
           rgba(0, 0, 0, 0) 0%,
@@ -92,7 +102,7 @@ export class MenuItems extends LitElement {
           rgba(0, 0, 0, 0) 100%
         );
       }
-      :host([scrollable][direction="column"].shadow-top) {
+      :host([scrollable][direction="column"].shadow-top) #menu-content {
         -webkit-mask-image: linear-gradient(
           to bottom,
           rgba(0, 0, 0, 0),
@@ -104,7 +114,7 @@ export class MenuItems extends LitElement {
           rgba(0, 0, 0, 1) 10%
         );
       }
-      :host([scrollable][direction="column"].shadow-bottom) {
+      :host([scrollable][direction="column"].shadow-bottom) #menu-content {
         -webkit-mask-image: linear-gradient(
           to top,
           rgba(0, 0, 0, 0),
@@ -116,7 +126,8 @@ export class MenuItems extends LitElement {
           rgba(0, 0, 0, 1) 10%
         );
       }
-      :host([scrollable][direction="column"].shadow-top.shadow-bottom) {
+      :host([scrollable][direction="column"].shadow-top.shadow-bottom)
+        #menu-content {
         -webkit-mask-image: linear-gradient(
           to top,
           rgba(0, 0, 0, 0) 0%,
@@ -162,6 +173,7 @@ export class MenuItems extends LitElement {
   @property({ type: Boolean }) scrollable = false;
 
   observer: ResizeObserver | null = null;
+  attributeObserver: MutationObserver | null = null;
 
   /**
    * Propriété min-width du bouton
@@ -169,8 +181,9 @@ export class MenuItems extends LitElement {
   @property({ type: String }) minWidth = "0";
 
   @query("menu") menu!: HTMLElement;
+  @query("#menu-content") menuContent!: HTMLElement;
 
-  @queryAssignedElements({ selector: "sonic-menu-item" })
+  @queryAssignedElements({ selector: "*" })
   menuChildren!: Array<HTMLElement>;
 
   @queryAssignedElements({ slot: "more", selector: "*" })
@@ -180,45 +193,103 @@ export class MenuItems extends LitElement {
   checkIfMore() {
     this.hasMoreElements = !!this.moreElements?.length;
   }
+  moreSlotChange() {
+    this.checkIfMore();
+    this.updateIsScollable();
+  }
 
   updated(_changedProperties: PropertyValues): void {
     const moreBtn = this.querySelector(".more-btn");
     if (this.size && moreBtn) {
       moreBtn.setAttribute("size", this.size);
     }
+    super.updated(_changedProperties);
+  }
 
-    const dividers = this.querySelectorAll("sonic-divider");
-
-    dividers.forEach((elt) => {
-      if (!elt.hasAttribute("size")) {
-        elt.setAttribute("size", "xs");
-      }
+  setDividersSize(assignedElements: Array<HTMLElement>) {
+    assignedElements.forEach((elt) => {
+      elt.setAttribute("size", "sm");
+      this.direction == "row"
+        ? elt.style.setProperty("margin", "0 .1rem ")
+        : elt.style.setProperty("margin", " 0.1rem 0");
     });
-
-    super.updated(_changedProperties);
   }
 
   mainSlotChange() {
     this.setChildrenSize(this.menuChildren);
+    this.setDividersSize(this.menuChildren);
     this.updateIsScollable();
+    this.updateScrollPosition();
+    this.observeMenuItemsAttributes();
+  }
+
+  observeMenuItemsAttributes() {
+    // Déconnecter l'ancien observer si existant
+    this.attributeObserver?.disconnect();
+
+    // Créer un nouvel observer pour surveiller les changements d'attribut 'active'
+    this.attributeObserver = new MutationObserver(() => {
+      this.updateScrollPosition();
+    });
+
+    // Observer chaque menu-item
+    this.menuChildren.forEach((item) => {
+      this.attributeObserver!.observe(item, {
+        attributes: true,
+        attributeFilter: ["active"],
+      });
+    });
+  }
+
+  updateScrollPosition() {
+    // Si on est en mode scrollable et qu'il y a exactement un seul menu-item actif
+    if (this.scrollable) {
+      const activeItems = this.menuChildren.filter(
+        (item) =>
+          item.hasAttribute("active") && item.getAttribute("active") !== "false"
+      );
+
+      if (activeItems.length === 1) {
+        requestAnimationFrame(() => {
+          activeItems[0].scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "center",
+          });
+        });
+      }
+    }
   }
 
   connectedCallback(): void {
     this.observer = new ResizeObserver(this.updateIsScollable);
     // observe if menu elements are overflowing and initiate scrollable
     this.observer.observe(this);
+
     super.connectedCallback();
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    this.menuContent.addEventListener("scrollend", this.handleScrollEnd);
+  }
+
+  // Écouter l'événement scrollend pour mettre à jour les ombres après le scroll
+  handleScrollEnd = () => {
+    this.setScrollShadow(this.menuContent, this.direction);
+  };
+
   disconnectedCallback(): void {
     this.observer?.disconnect();
+    this.attributeObserver?.disconnect();
+    this.menuContent.removeEventListener("scrollend", this.handleScrollEnd);
+
     super.disconnectedCallback();
   }
 
   updateIsScollable = () => {
     if (this.scrollable) {
       this.initScrollable();
-      this.setScrollShadow(this, this.direction);
+      this.setScrollShadow(this.menuContent, this.direction);
     }
   };
 
@@ -231,8 +302,9 @@ export class MenuItems extends LitElement {
       this.addEventListener("mousedown", (e) => {
         isDown = true;
         this.classList.add("active");
-        startX = e.pageX - this.offsetLeft;
-        scrollLeft = this.scrollLeft;
+
+        startX = e.pageX - this.menuContent.offsetLeft;
+        scrollLeft = this.menuContent.scrollLeft;
       });
       this.addEventListener("mouseleave", () => {
         isDown = false;
@@ -245,16 +317,16 @@ export class MenuItems extends LitElement {
       this.addEventListener("mousemove", (e) => {
         if (!isDown) return;
         e.preventDefault();
-        const x = e.pageX - this.offsetLeft;
+        const x = e.pageX - this.menuContent.offsetLeft;
         const walk = (x - startX) * 1.5; //scroll-fast
-        this.scrollLeft = scrollLeft - walk;
-        this.setScrollShadow(this, this.direction);
+        this.menuContent.scrollLeft = scrollLeft - walk;
+        this.setScrollShadow(this.menuContent, this.direction);
       });
       this.addEventListener("scroll", (e) => {
         e.preventDefault();
         // const delta = Math.sign(e.deltaY);
         // this.scrollLeft += delta * 50;
-        this.setScrollShadow(this, this.direction);
+        this.setScrollShadow(this.menuContent, this.direction);
       });
     }
   }
@@ -312,10 +384,14 @@ export class MenuItems extends LitElement {
     const menuStyles = {
       minWidth: this.minWidth,
       flexDirection: this.direction,
-      gap: this.gap,
     };
     const isMenuRow = this.direction == "row";
 
+    const menuContentStyles = {
+      gap: this.gap,
+      flexDirection: this.direction,
+    };
+
     const popStyles = {
       display: "block",
       alignSelf: isMenuRow ? "center" : "flex-start",
@@ -331,7 +407,11 @@ export class MenuItems extends LitElement {
       class="shadowable"
       style=${styleMap(menuStyles)}
     >
-      <slot @slotchange=${this.mainSlotChange}></slot>
+      <slot
+        @slotchange=${this.mainSlotChange}
+        id="menu-content"
+        style=${styleMap(menuContentStyles)}
+      ></slot>
       <sonic-pop
         style=${styleMap(popStyles)}
         class=${!this.hasMoreElements ? "hidden" : ""}
@@ -347,7 +427,11 @@ export class MenuItems extends LitElement {
             name=${isMenuRow ? "more-vert" : "more-horiz"}
           ></sonic-icon>
         </sonic-menu-item>
-        <slot name="more" @slotchange=${this.checkIfMore} slot="content"></slot>
+        <slot
+          name="more"
+          @slotchange=${this.moreSlotChange}
+          slot="content"
+        ></slot>
       </sonic-pop>
     </menu>`;
   }

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

@@ -125,12 +125,12 @@ export class Modal extends Subscriber(LitElement) {
       /* Layout des éléments slottés */
       ::slotted(sonic-modal-title),
       sonic-modal-title {
-        margin-bottom: 1.75rem;
+        margin-bottom: 1.2rem;
       }
       ::slotted(sonic-modal-subtitle),
       sonic-modal-subtitle {
-        margin-bottom: 1.75rem;
-        margin-top: -1.25rem;
+        margin-bottom: 1.2rem;
+        margin-top: -1rem;
       }
 
       :host([align="left"]) ::slotted(sonic-modal-title),
@@ -331,7 +331,7 @@ export class Modal extends Subscriber(LitElement) {
       maxHeight: this.maxHeight,
       width: this.width,
       height: this.height,
-      pointerEvents: this._animationState === "visible" ? "auto" : "none",
+      pointerEvents: this._animationState !== "hidden" ? "auto" : "none",
     };
 
     const overlayStyles = {