@supersoniks/concorde 2.0.7 → 3.0.1

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

@@ -0,0 +1,79 @@
+# Pop
+
+## Placement
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block" placement="left">
+      <sonic-button>Left</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="right">
+      <sonic-button>Right</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="top">
+      <sonic-button>Top</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="bottom">
+      <sonic-button>Bottom</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## Shadow
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block" shadow="none" placement='top' >
+      <sonic-button>None</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" shadow="sm"  placement='top'>
+      <sonic-button>Small</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" shadow="md"  placement='top'>
+      <sonic-button>Medium</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" shadow="lg"  placement='top'>
+      <sonic-button>Large</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## noToggle
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block"  noToggle>
+      <sonic-button>No toggle on click</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" >
+      <sonic-button>Default toggle on click</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,291 @@
+import {html, LitElement, css, PropertyValues} from "lit";
+import {customElement, query, state, property} from "lit/decorators.js";
+
+import HTML, {SearchableDomElement} from "@supersoniks/concorde/core/utils/HTML";
+// Toast
+type PopPlacement = "bottom" | "top" | "right" | "left";
+const tagName = "sonic-pop";
+
+@customElement(tagName)
+export class Pop extends LitElement {
+  static pops = new Set<Pop>();
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      slot[name="content"] {
+        max-width: 80vw;
+        background-color: var(--sc-base);
+        position: fixed;
+        z-index: 99999;
+        display: block;
+        transform: translateY(1rem) scale(0.95);
+        opacity: 0;
+        pointer-events: none;
+        transition-duration: 0.15s;
+        transition-timing-function: ease;
+        transition-property: all;
+        border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
+      }
+
+      slot[name="content"].is-open:not(.is-empty) {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+        pointer-events: auto;
+        transition-property: scale, opacity;
+        transition-timing-function: cubic-bezier(0.25, 0.25, 0.42, 1.225);
+      }
+
+      /*OMBRE*/
+      :host([shadow]) slot[name="content"],
+      :host([shadow="md"]) slot[name="content"],
+      :host([shadow="true"]) slot[name="content"] {
+        box-shadow: var(--sc-shadow);
+      }
+
+      :host([shadow="sm"]) slot[name="content"] {
+        box-shadow: var(--sc-shadow-sm);
+      }
+
+      :host([shadow="none"]) slot[name="content"] {
+        box-shadow: none;
+      }
+
+      :host([shadow="lg"]) slot[name="content"] {
+        box-shadow: var(--sc-shadow-lg);
+      }
+
+      :host([inline]) {
+        vertical-align: baseline;
+      }
+    `,
+  ];
+
+  @state() open = false;
+  @query("slot:not([name=content])") popBtn!: HTMLElement;
+  @query("slot[name=content]") popContent!: HTMLElement;
+  @property({type: Boolean}) noToggle = false;
+  @property({type: Boolean, reflect: true}) inline = false;
+
+  /**
+   * Ombre
+   */
+  @property({type: String, reflect: true}) shadow: "" | "none" | "sm" | "md" | "lg" = "lg";
+
+  @property({type: String}) placement: PopPlacement = "bottom";
+  positioningRuns = false;
+  lastContentX = 0;
+  lastContentY = 0;
+  resizeObserver: ResizeObserver = new ResizeObserver(() => this.computePosition(this.placement));
+
+  runPositioningLoop() {
+    if (!this.positioningRuns) return;
+    this.positioningRuns = true;
+    this.computePosition(this.placement);
+    window.requestAnimationFrame(() => this.runPositioningLoop());
+  }
+
+  toggle(e: Event) {
+    if (this.open && this.noToggle) return;
+    const keyboardEvent = e as KeyboardEvent;
+    if (e.type == "keydown" && (keyboardEvent.key != "ArrowDown" || this.open)) return;
+    this.open = !this.open;
+    this.open ? this.show() : this.hide();
+  }
+
+  show() {
+    this.setMaxZindex();
+    this.popContent.style.removeProperty("display");
+    this.open = true;
+    this.popContent.setAttribute("tabindex", "0");
+    if (this.popBtn && this.popContent && !this.positioningRuns) {
+      this.positioningRuns = true;
+      this.lastContentX = 0;
+      this.lastContentY = 0;
+      this.runPositioningLoop();
+    }
+    this.dispatchEvent(new CustomEvent("show"));
+  }
+
+  hide() {
+    this.resetZindexes();
+    this.open = false;
+    this.popContent.setAttribute("tabindex", "-1");
+    this.positioningRuns = false;
+    this.dispatchEvent(new CustomEvent("hide"));
+  }
+
+  /**
+   * Remonte dans la structure html de parents en parents et si ils on une position relative ou absolute, on met leur z-index élévé
+   */
+  ancestorsHavingZIndex = new Set<HTMLElement>();
+  setMaxZindex() {
+    HTML.everyAncestors(this, (parent: SearchableDomElement) => {
+      const htmlElement = parent as HTMLElement;
+      if (!htmlElement.className) return true;
+      if ([...htmlElement.classList].includes("@container")) {
+        const style = htmlElement.style;
+        style.zIndex = "999999999";
+        //n'appliquer l'ajout du style "position:relative" que si il n'est pas déjà présent dans le style calculé
+        const computedStyle = getComputedStyle(htmlElement);
+
+        if (computedStyle.position !== "relative" && computedStyle.position !== "absolute") {
+          style.position = "relative";
+        }
+
+        this.ancestorsHavingZIndex.add(parent as HTMLElement);
+        return false;
+      }
+      return true;
+    });
+  }
+
+  resetZindexes() {
+    this.ancestorsHavingZIndex.forEach((elt) => {
+      elt.style.removeProperty("position");
+      elt.style.removeProperty("z-index");
+    });
+    this.ancestorsHavingZIndex.clear();
+  }
+
+  _handleClosePop(e: Event) {
+    const path = e.composedPath();
+    const target = path[0] as HTMLElement;
+
+    Pop.pops.forEach((pop: Pop) => {
+      const popContainsTarget = path.includes(pop);
+      const popContentContainsTarget = path.includes(pop.querySelector('[slot="content"]') as EventTarget);
+      const isCloseManual = HTML.getAncestorAttributeValue(target, "data-on-select") === "keep";
+      if (e.type == "pointerdown" && popContainsTarget) return;
+      if (e.type == "click" && ((popContainsTarget && isCloseManual) || !popContentContainsTarget)) return;
+      pop.hide();
+    });
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (Pop.pops.size == 0) {
+      document.addEventListener("pointerdown", this._handleClosePop);
+      document.addEventListener("click", this._handleClosePop);
+    }
+    Pop.pops.add(this);
+  }
+
+  // /*
+  //   On attends le premier rendu pour observer les changements de taille car popup content n'est pas encore défini sinon
+  // */
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    this.resizeObserver.observe(this.popContent);
+  }
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    Pop.pops.delete(this);
+    if (Pop.pops.size == 0) {
+      document.removeEventListener("pointerdown", this._handleClosePop);
+      document.removeEventListener("click", this._handleClosePop);
+    }
+    this.resizeObserver.unobserve(this.popContent);
+  }
+
+  computePosition(placement: PopPlacement) {
+    let contentRect = this.popContent?.getBoundingClientRect();
+    const padding = 8;
+    const shiftPadding = 5;
+    const thisRect = this.getBoundingClientRect();
+
+    const x0 = thisRect.left;
+    const y0 = thisRect.top;
+    let x = x0,
+      y = y0;
+    const yTop = y0 - contentRect.height - padding;
+    const xLeft = x0 - contentRect.width - padding;
+    const xRight = x0 + thisRect.width + padding;
+    const yBottom = y0 + thisRect.height + padding;
+    switch (placement) {
+      case "bottom":
+        y = yBottom;
+        break;
+      case "top":
+        y = yTop;
+        break;
+      case "left":
+        x = xLeft;
+        break;
+      case "right":
+        x = xRight;
+        break;
+    }
+
+    // const dxRight = window.innerWidth - xRight - bodyRect.left - contentRect.width - shiftPadding;
+    // if (dxRight < 0 && placement === "right") x = xLeft;
+    // if (dxRight < 0 && ["top", "bottom"].includes(placement)) x = Math.max(x + dxRight, xLeft + thisRect.width);
+
+    // const dxLeft = -bodyRect.left - xLeft;
+    // if (dxLeft > shiftPadding && placement === "left") x = xRight;
+
+    // const dyBottom = window.innerHeight - yBottom - bodyRect.top - contentRect.height - shiftPadding;
+    // if (dyBottom < 0 && placement === "bottom") y = yTop;
+    // if (dyBottom < 0 && ["left", "right"].includes(placement)) y = Math.max(y + dyBottom, yTop + thisRect.height);
+
+    // const dyTop = -bodyRect.top - yTop;
+    // if (dyTop > -shiftPadding && placement === "top") y = yBottom;
+
+    this.lastContentX += x - contentRect.x;
+    this.lastContentY += y - contentRect.y;
+    Object.assign(this.popContent.style, {
+      left: `${this.lastContentX}px`,
+      top: `${this.lastContentY}px`,
+    });
+
+    contentRect = this.popContent?.getBoundingClientRect();
+    if (contentRect.x < shiftPadding && placement == "left") x = xRight;
+    if (contentRect.y < shiftPadding && placement == "top") y = yBottom;
+    if (contentRect.x + contentRect.width > window.innerWidth - shiftPadding && placement == "right") x = xLeft;
+    if (contentRect.y + contentRect.height > window.innerHeight - shiftPadding && placement == "bottom") y = yTop;
+
+    this.lastContentX += x - contentRect.x;
+    this.lastContentY += y - contentRect.y;
+    Object.assign(this.popContent.style, {
+      left: `${this.lastContentX}px`,
+      top: `${this.lastContentY}px`,
+    });
+
+    contentRect = this.popContent?.getBoundingClientRect();
+
+    if (contentRect.x < 0) {
+      this.lastContentX += -contentRect.x;
+    }
+    if (contentRect.y < 0) {
+      this.lastContentY += -contentRect.y;
+    }
+    if (contentRect.x + contentRect.width > window.innerWidth) {
+      this.lastContentX += window.innerWidth - (contentRect.x + contentRect.width);
+    }
+    if (contentRect.y + contentRect.height > window.innerHeight) {
+      this.lastContentY += window.innerHeight - (contentRect.y + contentRect.height);
+    }
+
+    Object.assign(this.popContent.style, {
+      left: `${this.lastContentX}px`,
+      top: `${this.lastContentY}px`,
+    });
+  }
+
+  render() {
+    return html`
+      <slot @click=${this.toggle} @keydown=${this.toggle} class="contents"></slot>
+      <slot
+        name="content"
+        tabindex="-1"
+        part="content"
+        style="display: none;"
+        class="  
+        ${this.open ? "is-open" : ""}"
+      ></slot>
+    `;
+  }
+}

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

@@ -0,0 +1,65 @@
+# Progress bar
+
+## Indeterminate
+
+<sonic-code>
+  <template>
+  <sonic-progress></sonic-progress>
+  </template>
+</sonic-code>
+
+
+## Remaining
+
+<sonic-code>
+  <template>
+  <sonic-progress  type="danger" value="80">
+    80% Used <span slot="remaining">20% left</span>
+  </sonic-progress>
+  </template>
+</sonic-code>
+
+## Sizes
+
+<sonic-code>
+  <template>
+<div class="grid gap-3">
+  <sonic-progress  size="2xs" value="25">25%</sonic-progress>
+  <sonic-progress  size="xs" value="25">25%</sonic-progress>
+  <sonic-progress  size="sm" value="25">25%</sonic-progress>
+  <sonic-progress  size="md" value="25">25%</sonic-progress>
+  <sonic-progress  size="lg" value="25">25%</sonic-progress>
+  <sonic-progress  size="xl" value="25">25%</sonic-progress>
+  <sonic-progress  size="2xl" value="25">25%</sonic-progress>
+</div>
+  </template>
+</sonic-code>
+
+## Type
+
+<sonic-code>
+  <template>
+<div class="grid gap-3">
+  <sonic-progress  value="50">50%</sonic-progress>
+  <sonic-progress  type="info" value="50">50%</sonic-progress>
+  <sonic-progress  type="warning" value="50">50%</sonic-progress>
+  <sonic-progress  type="success" value="50">50%</sonic-progress>
+  <sonic-progress  type="danger" value="50">50%</sonic-progress>
+</div>
+   </template>
+</sonic-code>
+
+
+## Invert
+
+<sonic-code>
+  <template>
+<div class="bg-neutral-800 p-4 rounded">
+  <sonic-progress invert value="50">50%</sonic-progress>
+  <sonic-progress invert type="info" value="50">50%</sonic-progress>
+  <sonic-progress invert type="warning" value="50">50%</sonic-progress>
+  <sonic-progress invert type="success" value="50">50%</sonic-progress>
+  <sonic-progress invert type="danger" value="50">50%</sonic-progress>
+</div>
+  </template>
+</sonic-code>

package/{core/components/ui/progress/progress.js → src/core/components/ui/progress/progress.ts}

@@ -1,35 +1,15 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {fontSize} from "@supersoniks/concorde/core/components/ui/_css/size";
+
 const tagName = "sonic-progress";
-let Progress = class Progress extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.max = 100;
-        this.invert = false;
-        this.type = "default";
-        this.size = "md";
-    }
-    render() {
-        return html `
-      <progress value=${ifDefined(this.value)} max=${this.max}></progress>
-      <div class="slot-container">
-        <slot></slot>
-        <slot name="remaining"></slot>
-      </div>
-    `;
-    }
-};
-Progress.styles = [
+
+@customElement(tagName)
+export class Progress extends LitElement {
+  static styles = [
     fontSize,
-    css `
+    css`
       :host {
         --sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
         --sc-progress-color: var(--sc-base-content, #1f2937);
@@ -133,23 +113,24 @@ Progress.styles = [
         margin-top: 0.15em;
       }
     `,
-];
-__decorate([
-    property({ type: Number })
-], Progress.prototype, "value", void 0);
-__decorate([
-    property({ type: Number })
-], Progress.prototype, "max", void 0);
-__decorate([
-    property({ type: Boolean })
-], Progress.prototype, "invert", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Progress.prototype, "type", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Progress.prototype, "size", void 0);
-Progress = __decorate([
-    customElement(tagName)
-], Progress);
-export { Progress };
+  ];
+
+  @property({type: Number}) value?: number;
+  @property({type: Number}) max = 100;
+  @property({type: Boolean}) invert = false;
+
+  @property({type: String, reflect: true})
+  type: "default" | "primary" | "warning" | "danger" | "success" | "info" = "default";
+
+  @property({type: String, reflect: true}) size: "xs" | "sm" | "md" | "lg" | "xl" = "md";
+
+  render() {
+    return html`
+      <progress value=${ifDefined(this.value)} max=${this.max}></progress>
+      <div class="slot-container">
+        <slot></slot>
+        <slot name="remaining"></slot>
+      </div>
+    `;
+  }
+}

package/src/core/components/ui/table/table-caption.ts

@@ -0,0 +1,21 @@
+import {html, LitElement, css} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-caption";
+
+@customElement(tagName)
+export class TableCaption extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: table-caption;
+        font-size: 0.75rem;
+        color: var(--sc-table-caption-color);
+        padding: var(--sc-table-td-py) var(--sc-table-td-px) calc(2 * var(--sc-table-td-py));
+      }
+    `,
+  ];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/core/components/ui/table/table-tbody.ts

@@ -0,0 +1,32 @@
+import {html, LitElement, css} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-tbody";
+
+@customElement(tagName)
+export class TableTbody extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: table-row-group;
+      }
+
+      ::slotted(sonic-tr:nth-child(odd)) {
+        background: var(--sc-table-accent-bg);
+      }
+
+      ::slotted(sonic-tr:hover) {
+        background: var(--sc-table-hover-bg);
+      }
+
+      ::slotted(sonic-tr:not(:last-child)) {
+        border-bottom: var(--sc-form-border-width) solid var(--sc-base-200) !important;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<tbody part="tbody">
+      <slot></slot>
+    </tbody>`;
+  }
+}

package/src/core/components/ui/table/table-td.ts

@@ -0,0 +1,47 @@
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {styleMap} from "lit/directives/style-map.js";
+const tagName = "sonic-td";
+import {typeColor} from "@supersoniks/concorde/core/components/ui/_css/type";
+
+@customElement(tagName)
+export class TableTd extends LitElement {
+  static styles = [
+    typeColor,
+    css`
+      :host {
+        display: contents;
+      }
+      td {
+        all: inherit;
+        display: table-cell;
+        padding: var(--sc-table-td-py) var(--sc-table-td-px);
+        border-top: var(--sc-table-td-border-t, none);
+        border-bottom: var(--sc-table-td-border-b, none);
+        border-right: var(--sc-table-td-border-r, none);
+        border-left: var(--sc-table-td-border-l, none);
+      }
+    `,
+  ];
+  @property({type: Number}) colSpan?: number;
+  @property({type: Number}) rowSpan?: number;
+  @property({type: String}) align?: string;
+  @property({type: String}) vAlign?: string;
+  @property({type: String}) minWidth?: string;
+  @property({type: String}) maxWidth?: string;
+  @property({type: String}) width?: string;
+
+  render() {
+    const styles = {
+      textAlign: this.align,
+      verticalAlign: this.vAlign,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth,
+      width: this.width,
+    };
+    return html`<td part="td" style=${styleMap(styles)} colspan=${ifDefined(this.colSpan)} rowspan=${ifDefined(this.rowSpan)}>
+      <slot></slot>
+    </td>`;
+  }
+}

package/src/core/components/ui/table/table-tfoot.ts

@@ -0,0 +1,20 @@
+import {html, LitElement, css} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-tfoot";
+
+@customElement(tagName)
+export class TableTfoot extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: contents;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<tfoot>
+      <slot></slot>
+    </tfoot>`;
+  }
+}