@supersoniks/concorde 2.0.7 → 3.0.1

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

@@ -0,0 +1,288 @@
+# Menu
+
+## Direction
+<sonic-code>
+  <template>
+    <sonic-menu direction="row" >
+      <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="arrow-right" slot="prefix"></sonic-icon>
+        Row
+      </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 type="danger">
+        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
+        Log out
+      </sonic-menu-item>
+    </sonic-menu>
+    <sonic-menu direction ="column" >
+      <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="arrow-down" slot="prefix"></sonic-icon>
+        Column
+      </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 type="danger">
+        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
+        Log out
+      </sonic-menu-item>
+    </sonic-menu>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-menu size="xs" direction="row">
+        <sonic-menu-item>
+          XS
+        </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>
+      <sonic-menu size="sm" direction="row">
+        <sonic-menu-item>
+          Small
+        </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>
+      <sonic-menu direction="row">
+        <sonic-menu-item>
+          Medium
+        </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>
+      <sonic-menu size="lg" direction="row">
+        <sonic-menu-item>
+          Large
+        </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>
+      <sonic-menu size="xl" direction="row">
+        <sonic-menu-item>
+          XL
+        </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>
+    </div>
+  </template>
+</sonic-code>
+
+## Shadow
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-menu direction="row">
+        <sonic-menu-item>
+          None
+        </sonic-menu-item>
+      </sonic-menu>
+      <sonic-menu shadow="sm" direction="row">
+        <sonic-menu-item>
+          Small
+        </sonic-menu-item>
+      </sonic-menu>
+      <sonic-menu shadow="md" direction="row">
+        <sonic-menu-item>
+          Medium
+        </sonic-menu-item>
+      </sonic-menu>
+      <sonic-menu shadow="lg" direction="row">
+        <sonic-menu-item>
+          Large
+        </sonic-menu-item>
+      </sonic-menu>
+    </div>
+  </template>
+</sonic-code>
+
+## Align
+<sonic-code>
+  <template>
+    <sonic-menu  align="center">
+      <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="home"></sonic-icon>
+        Home
+      </sonic-menu-item>
+      <sonic-menu-item>
+        <sonic-icon library="iconoir" name="user"></sonic-icon>
+        Profile
+      </sonic-menu-item>
+    </sonic-menu>
+    <sonic-menu  align="left">
+      <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="home"></sonic-icon>
+        Home
+      </sonic-menu-item>
+      <sonic-menu-item>
+        <sonic-icon library="iconoir" name="user"></sonic-icon>
+        Profile
+      </sonic-menu-item>
+    </sonic-menu>
+    <sonic-menu  align="right">
+      <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="home"></sonic-icon>
+        Home
+      </sonic-menu-item>
+      <sonic-menu-item>
+        <sonic-icon library="iconoir" name="user"></sonic-icon>
+        Profile
+      </sonic-menu-item>
+    </sonic-menu>
+  </template>
+</sonic-code>
+
+
+
+## More
+<sonic-code>
+  <template>
+    <sonic-menu direction="row">
+      <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="home"></sonic-icon>
+        Home
+      </sonic-menu-item>
+      <sonic-menu-item>
+        <sonic-icon library="iconoir" name="user"></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 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>
+    </sonic-menu>
+  </template>
+</sonic-code>
+
+## Scrollable
+<sonic-code>
+  <template>
+    <sonic-menu direction="row" scrollable>
+      <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 >
+        <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-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

@@ -0,0 +1,292 @@
+import {html, LitElement, css, PropertyValues} from "lit";
+import {styleMap} from "lit/directives/style-map.js";
+import {customElement, property, queryAssignedElements, state, query} from "lit/decorators.js";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
+const tagName = "sonic-menu";
+
+@customElement(tagName)
+export class MenuItems extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        --sc-menu-gap: 0.15rem;
+      }
+
+      :host > menu {
+        display: flex;
+        border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
+        margin: 0;
+        padding: 0.35em;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      /*OMBRE*/
+      :host([shadow]) .shadowable,
+      :host([shadow="md"]) .shadowable,
+      :host([shadow="true"]) .shadowable {
+        box-shadow: var(--sc-shadow);
+      }
+
+      :host([shadow="sm"]) .shadowable {
+        box-shadow: var(--sc-shadow-sm);
+      }
+
+      :host([shadow="lg"]) .shadowable {
+        box-shadow: var(--sc-shadow-lg);
+      }
+
+      :host([shadow="none"]) .shadowable {
+        box-shadow: none;
+      }
+
+      /* SCROLLABLE*/
+      :host([scrollable]) {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+      :host([scrollable]) menu > * {
+        scroll-snap-align: start;
+        white-space: nowrap;
+      }
+      :host([scrollable][direction="row"]) {
+        overflow-x: scroll;
+        scroll-snap-type: x mandatory;
+      }
+      :host([scrollable][direction="column"]) {
+        overflow-y: scroll;
+        scroll-snap-type: y mandatory;
+      }
+      :host([scrollable])::-webkit-scrollbar {
+        display: none !important;
+      }
+      :host([scrollable][direction="row"].shadow-right) {
+        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="row"].shadow-left) {
+        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="row"].shadow-left.shadow-right) {
+        -webkit-mask-image: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+      }
+      :host([scrollable][direction="column"].shadow-top) {
+        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="column"].shadow-bottom) {
+        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="column"].shadow-top.shadow-bottom) {
+        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+      }
+    `,
+  ];
+
+  /**
+   * Taille du composant, peut avoir un effet sur ses composants enfants
+   * tels que les dividers / boutons,... qui n'auraient pas d'attribut size précisés.
+   */
+  @property({type: String, reflect: true}) size: "" | "xs" | "sm" | "lg" = "";
+  /**
+   * Direction
+   */
+  @property({type: String, reflect: true}) direction: "row" | "column" = "column";
+  @property({type: String}) gap = "var(--sc-menu-gap)";
+
+  @property({type: String, reflect: true}) align: "center" | "left" | "right" = "left";
+
+  /**
+   * Ombre
+   */
+  @property({type: String, reflect: true}) shadow: "" | "sm" | "md" | "lg" | "xl" | "none" | null = null;
+
+  @property({type: String}) moreShape: "square" | "circle" = "circle";
+  @property({type: Boolean}) scrollable = false;
+
+  observer: ResizeObserver | null = null;
+
+  /**
+   * Propriété min-width du bouton
+   */
+  @property({type: String}) minWidth = "0";
+
+  @query("menu") menu!: HTMLElement;
+
+  @queryAssignedElements({selector: "sonic-menu-item"})
+  menuChildren!: Array<HTMLElement>;
+
+  @queryAssignedElements({slot: "more", selector: "*"})
+  moreElements!: Array<HTMLElement>;
+  @state() hasMoreElements = false;
+
+  checkIfMore() {
+    this.hasMoreElements = !!this.moreElements?.length;
+  }
+
+  updated(_changedProperties: PropertyValues): void {
+    const moreBtn = this.querySelector(".more-btn");
+    if (this.size && moreBtn) {
+      moreBtn.setAttribute("size", this.size);
+    }
+
+    const dividers = this.querySelectorAll("sonic-divider");
+
+    dividers.forEach((elt) => {
+      if (!elt.hasAttribute("size")) {
+        elt.setAttribute("size", "xs");
+      }
+    });
+
+    super.updated(_changedProperties);
+  }
+
+  mainSlotChange() {
+    this.setChildrenSize(this.menuChildren);
+    this.updateIsScollable();
+  }
+
+  connectedCallback(): void {
+    this.observer = new ResizeObserver(this.updateIsScollable);
+    // observe if menu elements are overflowing and initiate scrollable
+    this.observer.observe(this);
+    super.connectedCallback();
+  }
+
+  disconnectedCallback(): void {
+    this.observer?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  updateIsScollable = () => {
+    if (this.scrollable) {
+      this.initScrollable();
+      this.setScrollShadow(this, this.direction);
+    }
+  };
+
+  initScrollable(): void {
+    let isDown = false;
+    let startX: number;
+    let scrollLeft: number;
+
+    if (this.scrollable) {
+      this.addEventListener("mousedown", (e) => {
+        isDown = true;
+        this.classList.add("active");
+        startX = e.pageX - this.offsetLeft;
+        scrollLeft = this.scrollLeft;
+      });
+      this.addEventListener("mouseleave", () => {
+        isDown = false;
+        this.classList.remove("active");
+      });
+      this.addEventListener("mouseup", () => {
+        isDown = false;
+        this.classList.remove("active");
+      });
+      this.addEventListener("mousemove", (e) => {
+        if (!isDown) return;
+        e.preventDefault();
+        const x = e.pageX - this.offsetLeft;
+        const walk = (x - startX) * 1.5; //scroll-fast
+        this.scrollLeft = scrollLeft - walk;
+        this.setScrollShadow(this, this.direction);
+      });
+      this.addEventListener("scroll", (e) => {
+        e.preventDefault();
+        // const delta = Math.sign(e.deltaY);
+        // this.scrollLeft += delta * 50;
+        this.setScrollShadow(this, this.direction);
+      });
+    }
+  }
+
+  setScrollShadow(target: HTMLElement, direction: string): void {
+    if (direction == "row") {
+      if (target.scrollLeft > 0) {
+        this.classList.add("shadow-left");
+      } else {
+        this.classList.remove("shadow-left");
+      }
+      if (target.scrollLeft < target.scrollWidth - target.offsetWidth) {
+        this.classList.add("shadow-right");
+      } else {
+        this.classList.remove("shadow-right");
+      }
+    } else if (direction == "column") {
+      if (target.scrollTop > 0) {
+        this.classList.add("shadow-top");
+      } else {
+        this.classList.remove("shadow-top");
+      }
+      if (target.scrollTop < target.scrollHeight - (target.offsetHeight + 1)) {
+        this.classList.add("shadow-bottom");
+      } else {
+        this.classList.remove("shadow-bottom");
+      }
+    }
+  }
+
+  setChildrenSize(menuItems: Array<HTMLElement>) {
+    menuItems.forEach((elt) => {
+      if (this.size) {
+        elt.setAttribute("size", this.size);
+      }
+
+      if (this.align) {
+        if (elt.getAttribute("shape") != "square" && elt.getAttribute("shape") != "circle") {
+          elt.setAttribute("align", this.align);
+        }
+      }
+
+      if (this.direction == "row") {
+        if (elt.getAttribute("shape") == "block") {
+          elt.setAttribute("shape", "default");
+        }
+      }
+    });
+  }
+
+  render() {
+    const menuStyles = {
+      minWidth: this.minWidth,
+      flexDirection: this.direction,
+      gap: this.gap,
+    };
+    const isMenuRow = this.direction == "row";
+
+    const popStyles = {
+      display: "block",
+      alignSelf: isMenuRow ? "center" : "flex-start",
+      justifySelf: "center",
+      flexDirection: this.direction,
+    };
+    const popBtnStyles = {
+      marginLeft: isMenuRow ? "" : ".55em",
+    };
+
+    return html`<menu part="menu" class="shadowable" style=${styleMap(menuStyles)}>
+      <slot @slotchange=${this.mainSlotChange}></slot>
+      <sonic-pop style=${styleMap(popStyles)} class=${!this.hasMoreElements ? "hidden" : ""}>
+        <sonic-menu-item style=${styleMap(popBtnStyles)} class="more-btn" shape=${this.moreShape} align="center">
+          <sonic-icon size="xl" name=${isMenuRow ? "more-vert" : "more-horiz"}></sonic-icon>
+        </sonic-menu-item>
+        <slot name="more" @slotchange=${this.checkIfMore} slot="content"></slot>
+      </sonic-pop>
+    </menu>`;
+  }
+}

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

@@ -0,0 +1,35 @@
+import {html, LitElement, css} from "lit";
+import {customElement, queryAssignedElements} from "lit/decorators.js";
+import {Modal} from "@supersoniks/concorde/core/components/ui/modal/modal";
+const tagName = "sonic-modal-actions";
+@customElement(tagName)
+export class ModalActions extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: auto;
+        padding-top: 1.5rem;
+      }
+    `,
+  ];
+
+  @queryAssignedElements({selector: "sonic-button"})
+  buttons!: Array<HTMLElement>;
+
+  firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
+    this.buttons?.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        if (btn.getAttribute("hideModal") != "false") {
+          const parentModal = this.closest("sonic-modal") as Modal;
+          parentModal?.hide();
+        }
+      });
+    });
+    super.firstUpdated(changedProperties);
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,36 @@
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {Modal} from "@supersoniks/concorde/core/components/ui/modal/modal";
+import {ifDefined} from "lit/directives/if-defined.js";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+const tagName = "sonic-modal-close";
+
+@customElement(tagName)
+export class ModalClose extends LitElement {
+  static styles = [
+    css`
+      :host {
+        position: sticky;
+        display: block;
+        align-self: flex-end;
+        height: 0;
+        top: 0.5rem;
+        right: 0.5rem;
+        transform: translate3d(calc(var(--sc-modal-px)), calc(-1 * var(--sc-modal-py)), 0);
+        z-index: 20;
+      }
+    `,
+  ];
+  @property() reset?: string;
+
+  render() {
+    return html`<sonic-button reset=${ifDefined(this.reset)} shape="circle" @click=${this.handleClick}
+      ><sonic-icon name="cancel" size="lg"></sonic-icon
+    ></sonic-button>`;
+  }
+
+  handleClick() {
+    const parentModal = HTML.getClosestElement(this, "sonic-modal") as Modal;
+    parentModal.hide();
+  }
+}

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

@@ -0,0 +1,19 @@
+import {html, LitElement, css} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-modal-content";
+
+@customElement(tagName)
+export class ModalContent extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

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

@@ -0,0 +1,23 @@
+import {html, LitElement, css} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-modal-subtitle";
+
+@customElement(tagName)
+export class ModalSubTitle extends LitElement {
+  static styles = [
+    css`
+      :host {
+        font-size: 1.1rem;
+        display: block;
+        line-height: 1.1rem;
+        line-height: var(--sc-headings-line-height);
+        font-family: var(--sc-headings-font-family);
+        font-weight: var(--sc-headings-font-weight);
+      }
+    `,
+  ];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}