@supersoniks/concorde 2.0.6 → 3.0.0

package/src/core/components/functional/mix/mix.ts

@@ -0,0 +1,95 @@
+import {PublisherProxy} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {Subscriber} from "@supersoniks/concorde/mixins";
+import {Objects, PublisherManager} from "@supersoniks/concorde/utils";
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {PublisherInterface, PublisherContentType} from "@supersoniks/concorde/core/_types/types";
+
+type Composition = Record<string, object | string>;
+type Listener = {publisher: PublisherInterface; subscriber: <T>(v: T) => void};
+@customElement("sonic-mix")
+export default class SonicMix extends Subscriber(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: contents;
+      }
+    `,
+  ];
+
+  private _composition: Composition = {};
+  @property({type: Object}) get composition() {
+    return this._composition;
+  }
+
+  set composition(value: Composition) {
+    this._composition = value;
+    this.updateComposition();
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.updateComposition();
+  }
+  disconnectedCallback(): void {
+    this.removePublisherListeners();
+    super.disconnectedCallback();
+  }
+  updateComposition() {
+    this.removePublisherListeners();
+    if (!this.publisher) return;
+    this.publisher.set({});
+    this.parseComposition(this.composition, this.publisher);
+  }
+  listeners: Listener[] = [];
+  removePublisherListeners() {
+    const listeners = this.listeners;
+    this.listeners = [];
+    listeners.forEach((listener) => {
+      this.publisher.offAssign(listener.subscriber);
+    });
+  }
+  parseComposition<T extends PublisherContentType = PublisherContentType>(
+    composition: Composition,
+    publisher: PublisherInterface<T>
+  ) {
+    if (!composition) return;
+    for (const z in composition) {
+      const value = composition[z];
+      if (typeof value === "string") {
+        const split = value.split(".");
+        const first = split.shift();
+        if (!first) continue;
+        let publisherSource = PublisherManager.get(first);
+        publisherSource = Objects.traverse(publisherSource, split);
+        const publisherSubscriber = {
+          publisher: publisherSource,
+          subscriber: <T>(v: T) => {
+            publisher[z] = v;
+          },
+        };
+        this.listeners.push(publisherSubscriber);
+        publisherSource.onAssign(publisherSubscriber.subscriber);
+
+        publisher._proxies_.set(z, publisherSource);
+      } else {
+        this.publisher[z] = {};
+        const newPublisher: PublisherInterface<T> = new PublisherProxy({}, publisher);
+        publisher._proxies_.set(z, newPublisher);
+        const publisherSubscriber = {
+          publisher: newPublisher,
+          subscriber: <T>(v: T) => {
+            publisher[z] = v;
+          },
+        };
+        this.listeners.push(publisherSubscriber);
+        newPublisher.onAssign(publisherSubscriber.subscriber);
+        this.parseComposition(value as Composition, newPublisher);
+      }
+    }
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/core/components/functional/queue/queue.md

@@ -0,0 +1,87 @@
+# Queue
+
+**sonic-queue** loads content in batches based on the expression provided in the dataProviderExpression attribute.
+
+* Each batch is loaded by a [List component](#core/components/functional/list/list.md/list) whose dataProvider is created from the dataProviderExpression attribute.
+* Upon initialization, it looks at the dataFilterProvider attribute, which provides the address of a publisher.
+If this attribute is found, Queue listens to the provided publisher and resets itself whenever the content of the publisher is modified.
+The values provided in this publisher are added as parameters to each request.
+* The key property can be used to target a specific property in the API response as fetch does.
+ 
+List extends the mixin [Subscriber](#docs/_core-concept/subscriber.md/subscriber)
+
+
+<sonic-code>
+  <template>
+    <sonic-queue
+        class="grid grid-cols-3 gap-3"
+        dataProviderExpression="communes?limit=$limit"
+        limit="30"
+        serviceURL="https://geo.api.gouv.fr/"
+        debug
+      >
+      <template>
+        <div data-bind ::inner-html="$nom" class="bg-neutral-100 p-2">
+          queue
+        </div>
+      </template>
+    </sonic-queue>
+  </template>
+</sonic-code>
+
+<sonic-code>
+  <template>
+    <sonic-queue
+      lazyload
+      dataProviderExpression="api/users?page=$offset&per_page=$limit"
+      offset="2"
+      limit="5"
+      dataFilterProvider="filter"
+      targetRequestDuration="500"
+      serviceURL="https://reqres.in"
+      key="data"
+      debug
+    >
+        <template>
+          <div class="flex px-4 py-3 items-center gap-4">
+            <sonic-image data-bind ::src="$avatar" rounded="full" ratio="1/1" class="w-20 block"></sonic-image>
+            <div>
+              <div class="text-bold text-2xl mb-2">
+                <span data-bind ::inner-html="$first_name"></span>
+                <span data-bind ::inner-html="$last_name"></span>
+              </div>
+              <sonic-button data-bind ::href="mailto|$email" size="xs" variant="outline"> Contact </sonic-button>
+            </div>
+          </div>
+          <div class="border-0 border-t-2 border-t-neutral-200 w-full border-solid"></div>
+        </template>
+    </sonic-queue>
+  </template>
+</sonic-code>
+
+<sonic-code>
+  <template>
+    <sonic-list
+      lazyload
+      fetch
+      dataProvider="api/users?page=2&per_page=5"
+      serviceURL="https://reqres.in"
+      key="data"
+      debug
+    >
+      <template>
+        <div class="flex px-4 py-3 items-center gap-4">
+          <sonic-image data-bind ::src="$avatar" rounded="full" ratio="1/1" class="w-20 block"></sonic-image>
+          <div>
+            <div class="text-bold text-2xl mb-2">
+              <span data-bind ::inner-html="$first_name"></span>
+              <span data-bind ::inner-html="$last_name"></span>
+            </div>
+            <sonic-button data-bind ::href="mailto|$email" size="xs" variant="outline"> Contact </sonic-button>
+          </div>
+        </div>
+        <div class="border-0 border-t-2 border-t-neutral-200 w-full border-solid"></div>
+      </template>
+    </sonic-list>
+  </template>
+</sonic-code>

package/src/core/components/functional/queue/queue.ts

@@ -0,0 +1,279 @@
+import {html, LitElement, nothing} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import {map} from "lit/directives/map.js";
+import {PublisherManager} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import "@supersoniks/concorde/core/components/functional/list/list";
+import {PublisherProxy} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {HTML} from "@supersoniks/concorde/utils";
+
+type QueueItem = {
+  id: string;
+  endPoint: string;
+  dataProvider: string;
+  offset: number;
+  limit: number;
+};
+type QueueProps = QueueItem[] & {resultCount?: number; lastFetchedData?: unknown};
+
+const tagName = "sonic-queue";
+/**
+ *### Une Queue charge du contenu par lot selon l'expression renseignée dans l'attribut *dataProviderExpression*.
+ * * Chaque lot est chargé par un composant [List](./?path=/docs/core-components-functional-list-list--basic) dont le dataProvider créé à partir de l'attribut dataProviderExpression
+ * * A l'initialisation elle regarde l'attribut dataFilterProvider qui donne l'adresse d'un publisher
+ * Si cet attribut est touvé, Queue écoute le publisher fourni et se réinitialise à chaque modification du contenu de celui-ci.
+ * Les valeurs renseignées dans ce publisher sont ajoutées en get à chaque requête
+ * * la proriété *key* peut être utilisé pour cibler une propriété particulière du retour de l'api.
+ */
+@customElement(tagName)
+export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
+  @property({type: Array}) templates: Array<HTMLTemplateElement> | null = null;
+  lastRequestTime = 0;
+  key = "";
+
+  @property({type: Object}) itemPropertyMap: object | null = null;
+  /**
+   * Durée cible en ms d'une requête pour afficher 1 lot.
+   */
+  @property() cache: RequestCache = "default";
+  @property() targetRequestDuration = 500;
+  /*
+   * Quantité d'éléments devant être chargés dans le premier lot.
+   * Cette valeur est mise à jour ensuite par Queue pour chauq lot pour se rapprocher tanque possible de *targetRequestDuration*
+   */
+  @property() limit = 5;
+  @property() lazyBoundsRatio = 1;
+
+  @property() offset = 0;
+  @property() resultCount = 0;
+  @property({type: Boolean}) noLazyload = false;
+
+  @property() filteredFields = "";
+  disconnectedCallback() {
+    for (const dataProvider of this.listDataProviders) {
+      PublisherManager.delete(dataProvider);
+      this.listDataProviders = [];
+    }
+    this.filterPublisher?.offInternalMutation(this.updateFilteredContent);
+    // reset internal state
+    this.props = null;
+    this.limit = 5;
+    this.offset = 0;
+    this.resultCount = 0;
+    this.searchHash = "";
+    this.requestId = 0;
+    this.isFirstRequest = true;
+    this.nextHadEvent = false;
+    this.publisher.set({});
+    super.disconnectedCallback();
+    return;
+  }
+  static instanceCounter = 0;
+  instanceId = 0;
+  localStorage = "disabled";
+  async connectedCallback() {
+    this.instanceId = Queue.instanceCounter++;
+    this.localStorage = this.getAttribute("localStorage") || this.localStorage;
+    this.filterTimeoutMs = parseInt(this.getAttribute("filterTimeoutMs") || "400");
+    //On supprime l'attribut car une queue ne doi pas être en localstorage, ce sont ses sous composants list qui doivent l'être
+    this.removeAttribute("localStorage");
+    this.noShadowDom = "";
+    this.defferedDebug = this.hasAttribute("debug") || null;
+    /**Compat avec states et routing **/
+    if (!this.dataProvider)
+      this.dataProvider = this.dataProviderExpression || "sonic-queue-" + this.instanceId + "-" + Math.random().toString(36).substring(7);
+    if (!this.dataProviderExpression) {
+      this.dataProviderExpression = HTML.getAncestorAttributeValue(this.parentElement, "dataProvider") || "";
+    }
+    super.connectedCallback();
+    this.publisher.set({});
+    this.key = this.getAttribute("key");
+    await PublisherManager.getInstance().isLocalStrorageReady;
+    if (!this.templates) this.templates = Array.from(this.querySelectorAll("template")) as Array<HTMLTemplateElement>;
+    this.lastRequestTime = new Date().getTime();
+    this.configFilter();
+  }
+  filterPublisher: PublisherProxy | null = null;
+  configFilter() {
+    const dataFilterProvider = this.getAncestorAttributeValue("dataFilterProvider");
+    if (!dataFilterProvider) {
+      this.next();
+      return;
+    }
+
+    this.filterPublisher = PublisherManager.getInstance().get(dataFilterProvider);
+    this.filterPublisher?.onInternalMutation(this.updateFilteredContent);
+  }
+  filterTimeoutId?: ReturnType<typeof setTimeout>;
+  filterTimeoutMs = 400;
+  searchHash = "";
+  requestId = 0;
+  isFirstRequest = true;
+  updateFilteredContent = () => {
+    /**
+     * On ne lance la recherche que si le hash de recherche est différent
+     */
+    const dataProvider = this.dataProviderExpression;
+    const split = dataProvider.split("?");
+    split.shift();
+    const searchParams = new URLSearchParams(split.join("?"));
+    const filterData: Record<string, string | string[]> = this.filterPublisher?.get();
+    const filteredFieldsArray = this.filteredFields.split(" ");
+    for (const f in filterData) {
+      let value = filterData[f];
+      if (Array.isArray(value)) value = value.filter((v: string | null) => v !== null);
+      if ((this.filteredFields && !filteredFieldsArray.includes(f)) || value == null || value.toString() === "") continue;
+      searchParams.set(f, filterData[f].toString());
+    }
+    const searchHash = searchParams.toString();
+    if (searchHash == this.searchHash && !this.isFirstRequest) return;
+    this.searchHash = searchHash;
+
+    /**
+     * on reset les données avant de lancer la requète
+     */
+
+    for (const dataProvider of this.listDataProviders) {
+      PublisherManager.delete(dataProvider);
+      // this.publisher.lastFetchedData = {};
+    }
+    this.listDataProviders = [];
+    clearTimeout(this.filterTimeoutId);
+    this.filterTimeoutId = setTimeout(
+      async () => {
+        const count = this.resultCount;
+        this.props = null;
+        //On garde le décompte au cas ou il n'y aurait pas rechargement
+        this.requestId++;
+        this.resultCount = count;
+        await PublisherManager.getInstance().isLocalStrorageReady;
+        window.requestAnimationFrame(() => this.next());
+      },
+      this.isFirstRequest ? 0 : this.filterTimeoutMs
+    );
+    this.isFirstRequest = false;
+  };
+
+  /**
+   * Cette expression est utilisée comme modèle par le composant Queue pour renseigngner le dataProvider de la [liste](./?path=/docs/core-components-functional-list-list--basic) créée.
+   * * l'expression *$offset* est alors remplacée par le numéro de l'élément à partir duquel démarrer
+   * * l'expression *$limit* est remplacée par la valeur représentant le nombre d'éléments à charger
+   * * Si pas d'expression *$offset* le composant se comporte un peu comme une liste, il ne va pas essayer de charger les éléments suivants
+   */
+  @property({type: String}) dataProviderExpression = "";
+
+  @property({type: String}) idKey = "id";
+
+  resetDuration() {
+    this.lastRequestTime = new Date().getTime();
+  }
+  listDataProviders: string[] = [];
+
+  nextHadEvent = false;
+  next(e?: CustomEvent) {
+    let offset = this.offset;
+    const newTime = new Date().getTime();
+    const requestDuration = newTime - this.lastRequestTime;
+
+    /**
+     * Le rechargement n'est pas garanti si pas de changement dans les filtres
+     * Un ne repasse donc à 0 qu'à partir du premier chargement.
+     * */
+    if (!this.nextHadEvent && e) {
+      this.publisher.resultCount = 0;
+      // this.publisher.lastFetchedData = {};
+      this.resultCount = 0;
+    }
+    this.nextHadEvent = !!e;
+
+    if (e) {
+      this.publisher.lastFetchedData = e.detail.fetchedData;
+      if (e.detail.requestId < this.requestId) return;
+      this.resultCount += e.detail.props.length;
+
+      if (!e.detail.isFirstLoad || !e.detail.props.length || this.dataProviderExpression.indexOf("$offset") == -1) {
+        this.publisher.resultCount = this.resultCount;
+        // this.publisher.lastFetchedData = {};
+        return;
+      }
+    }
+    if (!Array.isArray(this.props)) {
+      const newProps: QueueProps = [];
+      newProps.resultCount = this.resultCount;
+      newProps.lastFetchedData = e?.detail.fetchedData || {};
+      this.props = newProps;
+    } else {
+      const props: Array<{offset: number; limit: number}> = this.props;
+      const item = props[props.length - 1];
+      offset = parseInt(item.offset.toString()) + parseInt(item.limit.toString());
+    }
+    if (requestDuration > 0 && e && !this.localStorage) {
+      this.limit = Math.round((this.limit / requestDuration) * this.targetRequestDuration);
+    }
+    if (this.limit < 1) this.limit = 1;
+    if (this.limit > 15) this.limit = 15;
+    let dataProvider = this.dataProviderExpression.replace("$offset", offset + "").replace("$limit", this.limit + "");
+    const split = dataProvider.split("?");
+    let endpoint = split.shift();
+    const searchParams = new URLSearchParams(split.join("?"));
+    const filterData: Record<string, string> = this.filterPublisher?.get();
+    const filteredFieldsArray = this.filteredFields.split(" ");
+
+    for (const f in filterData) {
+      if ((this.filteredFields && filteredFieldsArray.includes(f)) || filterData[f] == null || filterData[f] == "") continue;
+      searchParams.set(f, filterData[f]);
+    }
+    if (!this.searchHash) this.searchHash = searchParams.toString();
+    endpoint = endpoint + "?" + searchParams.toString();
+    dataProvider = dataProvider + "_item_from_queue_" + this.instanceId;
+    this.listDataProviders.push(dataProvider);
+    const newProps: QueueProps = [
+      ...this.props,
+      {
+        id: searchParams.toString() + "/" + this.props.length,
+        dataProvider: dataProvider,
+        endPoint: endpoint,
+        offset: offset,
+        limit: this.limit,
+      },
+    ];
+    newProps.resultCount = this.resultCount;
+    newProps.lastFetchedData = e?.detail.fetchedData || {};
+    this.props = newProps;
+    this.lastRequestTime = new Date().getTime();
+  }
+  render() {
+    if (!Array.isArray(this.props)) return nothing;
+    let lazyload = !this.noLazyload;
+    if (this.props.length == 1) {
+      lazyload = false;
+    }
+    return html`
+      ${map(this.props, (item, index) => {
+        const templates = index == 0 ? this.templates : this.templates?.filter((elt) => elt.getAttribute("data-value") != "no-item");
+        return html`
+          <sonic-list
+            fetch
+            loader="inline"
+            cache=${this.cache}
+            displayContents
+            lazyBoundsRatio=${this.lazyBoundsRatio}
+            ?lazyload=${lazyload}
+            localStorage=${this.localStorage}
+            requestId=${this.requestId}
+            .itemPropertyMap=${this.itemPropertyMap}
+            ?debug=${this.defferedDebug === true}
+            @load=${this.next}
+            key=${this.key}
+            @loading=${this.resetDuration}
+            dataProvider="${item.dataProvider}"
+            endPoint="${item.endPoint}"
+            idKey=${this.idKey}
+            .templates=${templates}
+          >
+          </sonic-list>
+        `;
+      })}
+    `;
+  }
+}

package/src/core/components/functional/router/redirect.ts

@@ -0,0 +1,44 @@
+import {LitElement} from "lit";
+import {customElement} from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+const tagName = "sonic-redirect";
+/**
+ * sonic-redirect permet d'effectuer une redirection.
+ * * L'URL de redirection fournie dans l'attribut *to*.
+ * * La redirection est effectuée en fonction de la disponibilité d'une donnée issue du publisher à l'adresse fournie par l'attribut dataProvider
+ * * La donnée a trouver est renseignées via l'attribut *onData* qui peur repésenter un chemin dans la donnée via la dot syntaxe
+ * * Si la données est trouvée et qu'elle peut être évaluée à true alors la redirection est effectuée
+ * Par exemple : la données vaut {user:{id:2}} si onData="user.id"la redirection est effectuée.
+ * * Si l'attribut pushState est défini, alors la redirection est effectuée via pushState, sinon c'est document.location qui est modifié.
+ */
+@customElement(tagName)
+export class SonicRedirect extends Subscriber(LitElement) {
+  udpateCallBack?: VoidFunction;
+  connectedCallback() {
+    this.noShadowDom = "";
+    this.style.display = "none";
+    super.connectedCallback();
+    this.udpateCallBack = () => this.update();
+    if (this.publisher) this.publisher.onInternalMutation(this.udpateCallBack);
+  }
+  disconnectedCallback(): void {
+    if (this.publisher) this.publisher.offInternalMutation(this.udpateCallBack);
+    super.disconnectedCallback();
+  }
+
+  update() {
+    if (this.hasAttribute("onAdded")) {
+      LocationHandler.changeFromComponent(this);
+      return;
+    }
+    if (!this.props) return;
+    const onDataPath = this.getAttribute("onData").split(".");
+    const searchedData = Objects.traverse(this.props, onDataPath);
+
+    if (searchedData && !(Objects.isObject(searchedData) && searchedData)) {
+      LocationHandler.changeFromComponent(this);
+    }
+  }
+}

package/src/core/components/functional/router/router.md

@@ -0,0 +1,112 @@
+# Router
+
+The router observes the document.location changes and updates its view as follows
+
+## Data-route / Basic
+
+When the data-route attribute of a template matches the current url, the content of this template is rendered
+
+<sonic-code>
+  <template>
+    <div class="flex gap-2 items-center">
+      <sonic-button href="#core/components/functional/router/router.md/router#home" size="xs">Home</sonic-button>
+      <sonic-button href="#core/components/functional/router/router.md/router#about" size="xs">About</sonic-button>
+      <sonic-button href="#core/components/functional/router/router.md/router#work" size="xs">Work</sonic-button>
+      <sonic-button href="#core/components/functional/router/router.md/router#contact" size="xs">Contact</sonic-button>
+    </div>
+    <sonic-router>
+      <template data-route="#home">
+        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Home</div>
+      </template>
+      <template data-route="#about">
+        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">About</div>
+      </template>
+      <template data-route="#work">
+        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Work</div>
+      </template>
+      <template data-route="#contact">
+        <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">Contact</div>
+      </template>
+    </sonic-router>
+  </template>
+</sonic-code>
+
+## Data-route / Regexp
+
+You can use any RegExp in the data-route attribute of your templates to match the current location and to extract variables from it using capturing groups.
+A dataProvider attribute is generated using the dataProviderExpression where $1, $2... are replaced with this variables.
+
+**e.g.**, data-route="#couleur_<b class="text-danger">(\d+)</b>" => dataProviderExpression="api/unknown/<b class="text-danger">$1</b>"
+
+The rendered content of the matching template is scoped with this  **dataProvider**.
+You can make creative usage on this feature to generate dynamic content based on services.
+
+<sonic-code>
+  <template>
+    <sonic-theme theme="light" serviceURL="https://reqres.in">
+      <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
+        <template>
+          <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
+            <span data-bind ::inner-html="ucFirst|$name"></span>
+          </sonic-button>
+        </template>
+      </sonic-list>
+      <sonic-router>
+        <template data-route="#couleur_(\d+)" dataProviderExpression="api/unknown/$1">
+          <sonic-fetch>
+            <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
+          </sonic-fetch>
+        </template>
+      </sonic-router>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Data-route / Url-pattern
+
+Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" target="_blank">url patterns</a>  
+**e.g.**, data-route="#couleur_<b class="text-danger">:id</b>" => dataProviderExpression="api/unknown/<b class="text-danger">:id</b>"
+
+<sonic-code>
+  <template>
+    <sonic-theme theme="light" serviceURL="https://reqres.in">
+      <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
+        <template>
+          <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
+            <span data-bind ::inner-html="ucFirst|$name"></span>
+          </sonic-button>
+        </template>
+      </sonic-list>
+      <sonic-router>
+        <template data-route="/*#couleur_:id" dataProviderExpression="api/unknown/:id">
+          <sonic-fetch>
+            <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
+          </sonic-fetch>
+        </template>
+      </sonic-router>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Redirect
+
+Redirect allows to redirect to a url when a data is provided.
+Here Redirect waits that a data is available in the property *theData* of the dataProvider *stupid-data-set-id*
+We are then redirected to the url *#data-is-set* which does nothing in itself.
+
+<sonic-code>
+  <template>
+    <sonic-redirect to="#core/components/functional/router/router.md/router#data-is-set" dataProvider="stupid-data-set-id" onData="theData"></sonic-redirect>
+    <div class="flex gap-2 mb-4" formDataProvider="stupid-data-set-id">
+      <sonic-button radio name="theData" value="Some Data" size="xs">
+        Enter data
+      </sonic-button>
+      <sonic-button radio name="theData" value="" href="javascript:history.back();" size="xs">
+        Delete the data and do a history.back()
+      </sonic-button>
+    </div>
+    
+  </template>
+</sonic-code>
+
+Example of use : use with a router and a submit to manage the steps of login/logout, display of user info.