@supersoniks/concorde 2.0.7 → 3.0.0

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

@@ -0,0 +1,117 @@
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {styleMap} from "lit/directives/style-map.js";
+const tagName = "sonic-image";
+@customElement(tagName)
+export class Image extends LitElement {
+  static styles = [
+    css`
+      :host {
+        --sc-img-radius: 0;
+        --sc-img-bg: var(--sc-placeholder-bg);
+        border-radius: var(--sc-img-radius);
+        display: block;
+        width: 100%;
+        background: var(--sc-img-bg);
+      }
+
+      img {
+        width: 100%;
+        vertical-align: middle;
+        object-fit: cover;
+      }
+
+      img[src=""] {
+        visibility: hidden;
+      }
+
+      /*Rounded*/
+      :host([rounded]) {
+        --sc-img-radius: var(--sc-rounded);
+        overflow: hidden;
+      }
+      :host([rounded="sm"]) {
+        --sc-img-radius: var(--sc-rounded-sm);
+      }
+
+      :host([rounded="md"]) {
+        --sc-img-radius: var(--sc-rounded-md);
+      }
+
+      :host([rounded="lg"]) {
+        --sc-img-radius: var(--sc-rounded-lg);
+      }
+      :host([rounded="xl"]) {
+        --sc-img-radius: var(--sc-rounded-xl);
+      }
+
+      /*Cercle*/
+      :host([rounded="full"]) {
+        --sc-img-radius: 50% !important;
+      }
+      :host([rounded="none"]) {
+        --sc-img-radius: 0 !important;
+      }
+
+      :host([cover]),
+      :host([cover]) > div,
+      :host([cover]) img {
+        position: absolute !important;
+        left: 0 !important;
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        height: 100% !important;
+        width: 100% !important;
+      }
+
+      :host([transition]) img {
+        opacity: 0;
+        transition: 0.25s;
+      }
+
+      :host([transition="fade-scale-out"]) img {
+        scale: 1.08;
+        transition: opacity 0.3s linear, scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+      :host([transition]) img.loaded {
+        opacity: 1;
+        scale: 1;
+      }
+    `,
+  ];
+
+  @property({type: String}) rounded: "" | "none" | "full" | "sm" | "md" | "lg" = "none";
+  @property({type: String}) src = "";
+  @property({type: String}) alt = "";
+  @property({type: String}) loading: "eager" | "lazy" = "lazy";
+  @property({type: String, reflect: true}) transition?: "fade" | "fade-scale-out";
+  @property({type: String}) ratio = "auto";
+  @property({type: String}) objectPosition = "center center";
+  @property({type: String}) imageRendering = "auto";
+  @property({type: Boolean, reflect: true}) cover = false;
+
+  firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void {
+    if (this.transition) {
+      const img = this.shadowRoot?.querySelector("img");
+      if (!img) return;
+      img.onload = function () {
+        img.classList.add("loaded");
+      };
+    }
+    super.firstUpdated(changedProperties);
+  }
+
+  render() {
+    const imgStyles = {
+      aspectRatio: this.cover ? "auto" : this.ratio,
+      imageRendering: this.imageRendering,
+      objectPosition: this.objectPosition,
+    };
+    return html`<div part="image">
+      <picture part="picture"
+        ><img part="img" src="${this.src}" loading="${this.loading}" alt="${this.alt}" style=${styleMap(imgStyles)}
+      /></picture>
+    </div>`;
+  }
+}

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

@@ -0,0 +1,43 @@
+# Link
+
+## Href
+<sonic-code>
+  <template>
+    <sonic-link href="/">Basic link with href attibute</sonic-link>
+  </template>
+</sonic-code>
+
+## Target
+<sonic-code>
+  <template>
+    <sonic-link href="/" target="_blank">Link with target attibute</sonic-link>
+  </template>
+</sonic-code>
+
+## AutoActive
+
+<sonic-code>
+  <template>
+    <sonic-link href="/#core/components"  class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
+  </template>
+</sonic-code>
+
+### AutoActive Strict vs partial
+
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-link href="/#core" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
+      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
+    </div>
+  </template>
+</sonic-code>
+
+### AutoActive disabled
+
+<sonic-code>
+  <template>
+      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
+  </template>
+</sonic-code>
+

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

@@ -0,0 +1,108 @@
+import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
+import {html, LitElement, css, PropertyValues, nothing} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import Electron from "@supersoniks/concorde/core/utils/Electron";
+const tagName = "sonic-link";
+
+@customElement(tagName)
+export class Link extends LitElement {
+  static styles = [
+    css`
+      a {
+        color: inherit;
+        text-decoration: none;
+        display: contents;
+      }
+    `,
+  ];
+
+  @property({type: String}) href = "";
+  private _location = "";
+  get location(): string {
+    return this._location;
+  }
+  set location(value: string) {
+    this._location = value;
+    LocationHandler.updateComponentActiveState(this);
+  }
+
+  @property({type: String, attribute: "data-aria-label"}) ariaLabel = null;
+
+  /**
+   * mode d'activation du bouton :
+   * - strict : l'url courante match exactement avec le href du bouton
+   * - partial : l'url courante match à gauche avec le href du bouton
+   * - disabled : aucune activation / désactivation
+   */
+  @property({type: String}) autoActive: "strict" | "partial" | "disabled" = "partial";
+  connectedCallback() {
+    if (this.href && this.href.indexOf("http") != 0) {
+      LocationHandler.onChange(this);
+      this.location = document.location.href.replace(document.location.origin, "");
+    }
+
+    // on Enter keypress we trigger a click on the link tag
+    this.addEventListener("keypress", (e: KeyboardEvent) => {
+      if (e.key === "Enter") {
+        this.shadowRoot?.querySelector("a")?.click();
+      }
+    });
+
+    this.setFocusable();
+
+    super.connectedCallback();
+  }
+
+  setFocusable() {
+    if (this.href) {
+      this.setAttribute("tabIndex", "0");
+    } else {
+      this.removeAttribute("tabIndex");
+    }
+  }
+
+  disconnectedCallback(): void {
+    LocationHandler.offChange(this);
+    super.disconnectedCallback();
+  }
+  private _target: string | null = null;
+  @property({type: String}) set target(newTarget) {
+    this._target = newTarget;
+    Electron.fixBlankLink(this);
+    this.requestUpdate();
+  }
+  get target() {
+    return this._target;
+  }
+
+  /**
+   * Si présent on passe en mode pushstate
+   */
+  @property({type: Boolean}) pushState: boolean | null = null;
+
+  handlePushState(e: Event) {
+    e.preventDefault();
+    LocationHandler.changeFromComponent(this);
+  }
+
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has("href")) {
+      this.setFocusable();
+    }
+  }
+
+  render() {
+    if (!this.href) return html`<slot></slot>`;
+    return html`
+      <a
+        href="${this.href}"
+        aria-label=${this.ariaLabel || nothing}
+        target=${ifDefined(this.target)}
+        @click=${this.pushState ? this.handlePushState : null}
+      >
+        <slot></slot>
+      </a>
+    `;
+  }
+}

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

@@ -0,0 +1,37 @@
+# Loader 
+
+## Inline mode
+
+<sonic-code>
+  <template>
+    <sonic-loader mode="inline"></sonic-loader>
+  </template>
+</sonic-code>
+
+## Fixed mode
+
+<sonic-code >
+  <template>
+    <div formDataProvider="toazdar">
+      <sonic-button  name="toggleLoader" value="on">
+        Toggle fixed loader
+        <sonic-loader swap="on"></sonic-loader>
+      </sonic-button>
+    </div>
+  </template>
+</sonic-code>
+
+## Hide / show programmatically
+
+<sonic-code language="javascript">
+  <template>
+  import {Loader} from "@supersoniks/concorde/core/components/ui/loader/loader";
+  // Show 
+  Loader.show({
+    mode:"fixed" // optional : fixed | inline
+    container : document.querySelector('#foo') // optional, default : parent sonic-theme || document.body
+  });
+  // Hide 
+  Loader.hide();
+  </template>
+</sonic-code>

package/src/core/components/ui/loader/loader.stories.ts

@@ -0,0 +1,25 @@
+import "./loader";
+import "../theme/theme";
+import { html } from "lit";
+
+// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+export default {
+  component: "sonic-loader",
+  title: "core/components/ui/Loader",
+  args: {
+    mode: "inline",
+    theme: "light",
+  },
+  argTypes: {
+    mode: { options: ["inline", "fixed"], control: { type: "select" } },
+    styles: { table: { category: "Internals or others" } },
+    loader: { table: { category: "Internals or others" } },
+    callCounter: { table: { category: "Internals or others" } },
+  },
+};
+
+const Template: any = ({ mode }: { mode: string; theme: string }) => {
+  return html` <sonic-loader mode="${mode}"> </sonic-loader> `;
+};
+
+export const Example = Template.bind({});

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

@@ -0,0 +1,81 @@
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+
+import {inline} from "@supersoniks/concorde/core/components/ui/loader/styles/inline";
+import {fixed} from "@supersoniks/concorde/core/components/ui/loader/styles/fixed";
+import {Theme} from "@supersoniks/concorde/core/components/ui/theme/theme";
+export type LoaderMode = "inline" | "fixed" | "noDelay";
+type LoaderConf = {mode?: string; container?: HTMLElement; noDelay?: boolean};
+const tagName = "sonic-loader";
+@customElement(tagName)
+export class Loader extends LitElement {
+  static styles = [
+    inline,
+    fixed,
+    css`
+      :host {
+        --sc-loader-bg: var(--sc-primary, currentColor);
+        pointer-events: none;
+      }
+
+      .sonic-loader {
+        opacity: 0;
+        animation: showLoader 0.5s 0.5s forwards;
+      }
+      .sonic-loader--inline,
+      .sonic-loader--nodelay {
+        animation-delay: 0s;
+      }
+
+      @keyframes showLoader {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+    `,
+  ];
+  static loader: Loader;
+  static callCounter = 0;
+  static show(conf?: LoaderConf) {
+    if (!Loader.loader) Loader.loader = document.createElement("sonic-loader") as Loader;
+    const loader: Loader = Loader.loader;
+    if (!conf) conf = {};
+    if (conf.mode) loader.setAttribute("mode", conf.mode);
+    if (conf.noDelay) loader.setAttribute("noDelay", "");
+
+    if (!conf.container) {
+      conf.container = Theme.getPopContainer();
+      conf.mode = "fixed";
+    }
+
+    conf.container.appendChild(loader);
+    Loader.callCounter++;
+  }
+
+  static hide() {
+    Loader.callCounter--;
+    if (Loader.callCounter > 0) return;
+    if (Loader.loader) Loader.loader.remove();
+  }
+
+  /**
+   * Mode d'affichage du loader
+   * * inline : Loader dans le contenu
+   * * fixed : Loader global par dessus la page
+   */
+  @property({type: String}) mode: LoaderMode = "fixed";
+  @property({type: Boolean}) noDelay: boolean = false;
+
+  render() {
+    return html`<div class="sonic-loader sonic-loader--${this.mode} ${this.noDelay ? "sonic-loader--nodelay" : ""} ">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>`;
+  }
+}

package/{core/components/ui/loader/styles/fixed.js → src/core/components/ui/loader/styles/fixed.ts}

@@ -1,5 +1,6 @@
 import { css } from "lit";
-export const fixed = css `
+
+export const fixed = css`
 
   @keyframes sonic-loader--fixed {
     0% {

package/{core/components/ui/loader/styles/inline.js → src/core/components/ui/loader/styles/inline.ts}

@@ -1,5 +1,6 @@
-import { css } from "lit";
-export const inline = css `
+import {css} from "lit";
+
+export const inline = css`
   :host([align="left"]) .sonic-loader--inline {
     margin-left: 0;
   }

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

@@ -0,0 +1,30 @@
+import {customElement} from "lit/decorators.js";
+import {Button} from "@supersoniks/concorde/core/components/ui/button/button";
+const tagName = "sonic-menu-item";
+
+@customElement(tagName)
+export class MenuItem extends Button {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute("variant")) {
+      this.variant = "ghost";
+    }
+
+    if (!this.hasAttribute("type")) {
+      this.type = "primary";
+    }
+
+    if (!this.hasAttribute("shape")) {
+      this.shape = "block";
+    }
+    const isSquareOrCircle = this.shape === "square" || this.shape === "circle";
+    if (!this.hasAttribute("align") && !isSquareOrCircle) {
+      this.align = "left";
+    }
+
+    super.connectedCallback();
+  }
+}