@supersoniks/concorde 3.1.0 → 3.1.2

package/src/core/mixins/FormElement.ts

@@ -1,9 +1,13 @@
-import {PublisherManager} from "@supersoniks/concorde/core/utils/PublisherProxy";
-import {property} from "lit/decorators.js";
-import {SubscriberInterface} from "@supersoniks/concorde/core/mixins/Subscriber";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { property } from "lit/decorators.js";
+import { SubscriberInterface } from "@supersoniks/concorde/core/mixins/Subscriber";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
-import {PublisherInterface, HTMLFormControl, CoreJSType} from "../_types/types";
-import {MixinArgsType} from "../_types/types";
+import {
+  PublisherInterface,
+  HTMLFormControl,
+  CoreJSType,
+} from "../_types/types";
+import { MixinArgsType } from "../_types/types";
 type Constructor<T> = new (...args: MixinArgsType[]) => T;
 type FormElementValue = string | string[] | object | null | undefined;
 export interface FormElementInterface extends SubscriberInterface {
@@ -42,16 +46,17 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
    *
    */
   class FormElement extends superClass implements FormElementInterface {
-    @property({type: Boolean, reflect: true}) touched = false;
-    @property({type: Boolean}) error = false;
-    @property({type: Boolean}) autofocus = false;
-    @property({type: Boolean}) required = false;
-    @property({type: Boolean}) forceAutoFill = false;
-    @property({type: Boolean}) disabled: true | null = null;
+    @property({ type: Boolean, reflect: true }) touched = false;
+    @property({ type: Boolean }) error = false;
+    @property({ type: Boolean }) autofocus = false;
+    @property({ type: Boolean }) required = false;
+    @property({ type: Boolean }) forceAutoFill = false;
+    @property({ type: Boolean }) disabled: true | null = null;
 
     /* Attribut data-aria-label pour passer aria-label */
-    @property({type: String, attribute: "data-aria-label"}) ariaLabel?: string;
-    @property({type: String, attribute: "data-aria-labelledby"})
+    @property({ type: String, attribute: "data-aria-label" })
+    ariaLabel?: string;
+    @property({ type: String, attribute: "data-aria-labelledby" })
     ariaLabelledby?: string;
 
     onValueAssign?: (v: string) => void;
@@ -84,7 +89,8 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       return this._name;
     }
     set name(value: string) {
-      if (this.hasAttribute("name") && !this.forceAutoFill) value = this.getAttribute("name");
+      if (this.hasAttribute("name") && !this.forceAutoFill)
+        value = this.getAttribute("name");
       this._name = value;
       this.requestUpdate();
     }
@@ -103,7 +109,9 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       }
     }
     getFormPublisher() {
-      if (!this.formDataProvider) this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+      if (!this.formDataProvider)
+        this.formDataProvider =
+          this.getAncestorAttributeValue("formDataProvider");
       if (this.formDataProvider) {
         return PublisherManager.get(this.formDataProvider);
       }
@@ -145,7 +153,7 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       if (
         Objects.isObject(value) &&
         Object.prototype.hasOwnProperty.call(value, "__value") &&
-        (value as {_value?: CoreJSType})._value == undefined
+        (value as { _value?: CoreJSType })._value == undefined
       )
         value = "";
       if (this._value == value) return;
@@ -156,11 +164,15 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
     initPublisher() {
       let formPublisher = this.getFormPublisher();
       const value =
-        this.hasAncestorAttribute("initFromPublisher") && this._name && formPublisher[this._name].get()
+        this.hasAncestorAttribute("initFromPublisher") &&
+        this._name &&
+        formPublisher[this._name].get()
           ? formPublisher[this._name].get()
           : this.getAttribute("value");
-      if (this._name && this.publisher) this.publisher[this._name].offAssign(this.onValueAssign);
-      if (this._name && formPublisher) formPublisher[this._name].offAssign(this.onFormValueAssign);
+      if (this._name && this.publisher)
+        this.publisher[this._name].offAssign(this.onValueAssign);
+      if (this._name && formPublisher)
+        formPublisher[this._name].offAssign(this.onFormValueAssign);
       super.initPublisher();
       if (!this.name) this._name = this.getAttribute("name");
       if (!this.value) this._value = this.getAttribute("value");
@@ -194,7 +206,8 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
      * En appuyant sur la touche "Up", le déplacement inverse est effectué.
      */
     addKeyboardNavigation() {
-      const keyboardLoopIds: string = this.getAncestorAttributeValue("data-keyboard-nav");
+      const keyboardLoopIds: string =
+        this.getAncestorAttributeValue("data-keyboard-nav");
       if (!keyboardLoopIds) return;
 
       const split = keyboardLoopIds.split(" ");
@@ -214,7 +227,8 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       this.addEventListener("keydown", (e) => {
         const keyboardEvent = e as KeyboardEvent;
         if (!["ArrowDown", "ArrowUp"].includes(keyboardEvent.key)) return;
-        const selector = "input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled])";
+        const selector =
+          "input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled])";
         const loop = keyboardLoop?.filter((el) => {
           const child = el.shadowRoot?.querySelector(selector);
           if (!child) return false;
@@ -244,7 +258,9 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
             next = loop[index - 1];
           }
         }
-        const elt = next?.shadowRoot?.querySelector(selector) as FormElementInterface | null;
+        const elt = next?.shadowRoot?.querySelector(
+          selector
+        ) as FormElementInterface | null;
 
         if (elt && elt.focus) {
           elt.focus();
@@ -254,15 +270,25 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       });
     }
 
+    focus() {
+      const inputElement = this.shadowRoot?.querySelector(
+        "[data-form-element]"
+      ) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      inputElement?.focus();
+    }
+
     connectedCallback(): void {
-      this.formDataProvider = this.getAncestorAttributeValue("formDataProvider") as string;
+      this.formDataProvider = this.getAncestorAttributeValue(
+        "formDataProvider"
+      ) as string;
       super.connectedCallback();
       this.addKeyboardNavigation();
     }
 
     disconnectedCallback() {
       super.disconnectedCallback();
-      if (this._name && this.publisher) this.publisher[this._name].offAssign(this.onValueAssign);
+      if (this._name && this.publisher)
+        this.publisher[this._name].offAssign(this.onValueAssign);
       const formPublisher = this.getFormPublisher();
       if (this._name && formPublisher) {
         formPublisher[this._name].offAssign(this.onFormValueAssign);

package/src/core/utils/PublisherProxy.ts

@@ -77,8 +77,9 @@ export class PublisherProxy<T = any> {
    * Supprime les écouteurs associés
    */
   delete() {
-    for (const proxy of this._proxies_.values()) {
-      proxy.delete();
+    for (const key in this._proxies_.keys()) {
+      if ((key as string) == "_parent_") continue;
+      this._proxies_.get(key)?.delete();
     }
     this._invalidateListeners_.clear();
     this._assignListeners_.clear();

package/src/docs/_getting-started/my-first-subscriber.md

@@ -0,0 +1,174 @@
+# My first subscriber component
+
+Learn how to build a subscriber component, styled with tailwind, 
+which could be used as a regular component or could be filled from a dataprovider.
+
+## Create a classic lit component
+
+<sonic-code language="javascript" >
+  <template>
+  import { html, LitElement, nothing } from "lit";
+  import { customElement, property } from "lit/decorators.js";
+  // name component
+  @customElement("docs-user")
+  export class user extends LitElement {
+    // set a few props
+    @property({ type: String }) first_name = "";
+    @property({ type: String }) last_name = "";
+    @property({ type: String }) avatar = "";
+    @property({ type: String }) email = "";
+    // output
+    render() {
+      return html`
+        <img src="${this.avatar}"  /> <br>
+        ${this.first_name} ${this.last_name} <br>
+        ${this.email}`;
+    }
+  }
+  </template>
+</sonic-code>
+
+
+### Style with tailwind and ui components
+
+First export tailwind, in a tailwind.ts file, stylesheet to add it in our component when needed.
+
+<sonic-code language="javascript">
+  <template>
+  import { css, unsafeCSS } from "lit";
+  import tailwindImport from "./css/tailwind.css?inline";
+  export const tailwind = css`${unsafeCSS(tailwindImport)}`;
+  </template>
+</sonic-code>
+
+<sonic-code language="javascript">
+  <template>
+    import { html, LitElement, nothing } from "lit";
+    import { customElement, property } from "lit/decorators.js";
+    // add tailwind and needed components
+    import { tailwind } from "../tailwind";
+    import '@supersoniks/concode/ui/image'
+    import '@supersoniks/concode/ui/button'
+    import '@supersoniks/concode/ui/icon'
+    //
+    @customElement("docs-user")
+    export class user extends LitElement {
+      // add tailwind stylesheed
+      static styles = [tailwind];
+      @property({ type: String }) first_name = "";
+      @property({ type: String }) last_name = "";
+      @property({ type: String }) avatar = "";
+      @property({ type: String }) email = "";
+      // use utility class in your markup
+      render() {
+        return html`<div
+          class="flex items-center gap-3 rounded-md hover:bg-neutral-50 -mx-2 p-2"
+        >
+          <sonic-image
+            src=${this.avatar}
+            rounded="md"
+            ratio="1/1"
+            class="w-16 block"
+          ></sonic-image>
+          <div>
+            <div>
+              ${this.first_name} <span class="font-bold">${this.last_name}</span>
+            </div>
+            <div class="text-sm text-neutral-400">${this.email}</div>
+          </div>
+          <div class="ml-auto relative">
+            <sonic-button
+              href="mailto:${this.email}"
+              size="sm"
+              variant="outline"
+              shape="circle"
+              class="relative"
+              icon
+            >
+              <sonic-icon library="iconoir" name="chat-bubble"></sonic-icon>
+            </sonic-button>
+          </div>
+        </div>`;
+      }
+    }
+  </template>
+</sonic-code>
+
+### Basic usage
+
+Reactive properties can be filled by its attributes as a simple lit component.
+
+<sonic-code>
+<template>
+<docs-user
+  first_name="Paul"
+  last_name="Metrand"
+  avatar="/img/paul_metrand_xs.jpg"
+  email="paulmetrand@concorde.fr"
+  ></docs-user>
+</template>
+</sonic-code>
+
+## Add Subscriber mixin
+
+Import Subscriber mixin, and add it around LitElement.
+<sonic-code language="javascript">
+  <template>
+    import { html, LitElement, nothing } from "lit";
+    import { customElement, property } from "lit/decorators.js";
+    import { tailwind } from "../tailwind";
+    import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+    @customElement("docs-user")
+    export class user extends Subscriber(LitElement) {
+      //...
+    }
+  </template>
+</sonic-code>
+
+## Autofill properties from a dataProvider
+
+Without a dataProvider attribute, a subscriber set its own dataprovider from first ancestor found, and then reactive properties automatically filled and update from it.
+A fetcher is a simple component which set its fetch result to props of its dataprovider.
+<sonic-code >
+<template>
+<sonic-fetch 
+    serviceURL="https://reqres.in"
+    dataProvider="api/users/3" 
+    key="data">
+     <docs-user></docs-user>
+</sonic-fetch>
+</template>
+</sonic-code>
+
+A subscriber can subscribe data from anywhere in the DOM, with its dataprovider set as a provider id.  
+<sonic-code >
+<template>
+<sonic-fetch 
+    serviceURL="https://reqres.in"
+    dataProvider="api/users/2" 
+    key="data"></sonic-fetch>
+<docs-user dataProvider="api/users/2" ></docs-user>
+<docs-user dataProvider="api/users/2" ></docs-user>
+<docs-user dataProvider="api/users/2" ></docs-user>
+</template>
+</sonic-code>
+
+
+<sonic-code >
+<template>
+
+<div class="grid grid-cols-1 gap-4">
+<form formDataProvider="userPreview" class="grid grid-cols-4 gap-3" >
+  <sonic-input label="First name" type="text" name="first_name" placeholder="John" value="Paul"></sonic-input>
+  <sonic-input label="Last name" type="text" name="last_name" placeholder="Doe" value="Metrand"></sonic-input>
+  <sonic-input class="col-span-2"  label="email" type="text" name="email" placeholder="johndoe@concorde.fr" value="paulmetrand@concorde.fr"></sonic-input>
+  <sonic-input type="file" name="avatar" value="/img/paul_metrand_xs.jpg"></sonic-input>
+</form>
+<sonic-divider align="left">Preview before submit</sonic-divider>
+<docs-user dataProvider="userPreview" ></docs-user>
+<sonic-button onClick="alert(JSON.stringify(SonicPublisherManager.get('userPreview').get()))">
+  Update data
+</sonic-button>
+</div>
+</template>
+</sonic-code>

package/src/docs/_getting-started/start.md

@@ -2,7 +2,7 @@
 
 ## What is Concorde ? 
 
-Based on **[lit.dev](https://lit.dev)**, Concorde is a collection of webcomponents made to build shared components, between apps or websites.  
+Based on **[lit.dev](https://lit.dev)**, Concorde is a collection of webcomponents made to build shared apps or websites.  
 Develop user interfaces without thinking about the implementation context, where everything is scoped, but preserving graphic consistency by setting the strict minimum of css variables.
 
 ## Why and use case
@@ -25,7 +25,7 @@ Webcomponents appeared to be a the perfect solution to guarantee that compatibil
 * Fetching data, lists, queue with lazyload
 * Data binding
 * Simple router, state component, ...
-* All ui component, with status variations to build an app with a consistent design
+* And all ui component, with status variants to build an app with a consistent design
 
 
 ## Start a new project easily 

package/src/docs/example/users.ts

@@ -1,64 +1,59 @@
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { tailwind } from "../tailwind";
 
-@customElement("docs-preview-user-item")
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+
+@customElement("docs-user")
 export class user extends Subscriber(LitElement) {
+  // add tailwind
   static styles = [tailwind];
 
+  @property({ type: String }) id = "";
   @property({ type: String }) avatar = "";
   @property({ type: String }) first_name = "";
   @property({ type: String }) email = "";
   @property({ type: String }) last_name = "";
-  @property({ type: String }) id = "";
 
   render() {
-    const inList = !!this.props?._metadata_;
-    const isfirst = this.props?._metadata_?.firstChild;
-    return html` ${!isfirst && inList
-        ? html`<div class="border-t my-1 border-neutral-100"></div>`
-        : ""}
-      <div
-        class="flex items-center gap-3 rounded-md hover:bg-neutral-100 -mx-2 p-2"
-      >
-        <sonic-image
-          data-bind=""
-          src=${this.avatar}
-          rounded="md"
-          ratio="1/1"
-          class="w-16 block"
-        ></sonic-image>
+    return html`<div
+      class="flex items-center gap-3 rounded-md hover:bg-neutral-50 -mx-2 p-2"
+    >
+      <sonic-image
+        src=${this.avatar}
+        rounded="md"
+        ratio="1/1"
+        class="w-16 block"
+      ></sonic-image>
+      <div>
         <div>
-          <div class="text-bold">
-            ${this.first_name} <span class="font-bold">${this.last_name}</span>
-          </div>
-          <div class="text-sm text-neutral-400">${this.email}</div>
-        </div>
-        <div class="ml-auto relative">
-          ${this.id == "2" || this.id == "5"
-            ? html`
-                <sonic-badge
-                  type="danger"
-                  size="2xs"
-                  class="absolute left-0 -top-1 z-10"
-                >
-                  ${this.id}</sonic-badge
-                >
-              `
-            : ""}
-          <sonic-button
-            data-bind=""
-            href="mailto:${this.email}"
-            size="sm"
-            variant="outline"
-            shape="circle"
-            class="relative"
-            icon
-          >
-            <sonic-icon library="iconoir" name="chat-bubble"></sonic-icon>
-          </sonic-button>
+          ${this.first_name} <span class="font-bold">${this.last_name}</span>
         </div>
-      </div>`;
+        <div class="text-sm text-neutral-400">${this.email}</div>
+      </div>
+      <div class="ml-auto relative">
+        ${this.id == "2" || this.id == "5"
+          ? html`
+              <sonic-badge
+                type="danger"
+                size="2xs"
+                class="absolute left-0 -top-1 z-10"
+              >
+                ${this.id}</sonic-badge
+              >
+            `
+          : nothing}
+        <sonic-button
+          href="mailto:${this.email}"
+          size="sm"
+          variant="outline"
+          shape="circle"
+          class="relative"
+          icon
+        >
+          <sonic-icon library="iconoir" name="chat-bubble"></sonic-icon>
+        </sonic-button>
+      </div>
+    </div>`;
   }
 }