@supersoniks/concorde 3.1.10 → 3.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.10",
+  "version": "3.1.12",
   "license": "MIT",
   "type": "module",
   "main": "",

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

@@ -52,6 +52,8 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
   @property() resultCount = 0;
   @property({ type: Boolean }) noLazyload = false;
 
+  @property({ type: String }) loader = "inline";
+
   @property() filteredFields = "";
   disconnectedCallback() {
     for (const dataProvider of this.listDataProviders) {
@@ -214,11 +216,11 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     if (e) {
       this.publisher.lastFetchedData = e.detail.fetchedData;
       if (e.detail.requestId < this.requestId) return;
-      this.resultCount += e.detail.props.length;
+      this.resultCount += e.detail.props?.length || 0;
 
       if (
         !e.detail.isFirstLoad ||
-        !e.detail.props.length ||
+        !e.detail.props?.length ||
         this.dataProviderExpression.indexOf("$offset") == -1
       ) {
         this.publisher.resultCount = this.resultCount;
@@ -298,7 +300,7 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
         return html`
           <sonic-list
             fetch
-            loader="inline"
+            loader="${this.loader}"
             cache=${this.cache}
             displayContents
             lazyBoundsRatio=${this.lazyBoundsRatio}

package/src/core/components/ui/form/input-autocomplete/input-autocomplete.ts

@@ -59,6 +59,7 @@ export class InputAutocomplete extends TemplatesContainer(
   @property({ type: Boolean }) readonly: boolean | null = null;
 
   @property({ type: String }) dataProviderExpression = "";
+  @property({ type: Number }) minSearchLength = 0;
   @property({ type: Boolean }) select?: boolean;
   @property({ type: String }) key = "";
   /** The parameter name to use in dataProviderExpression route */
@@ -72,6 +73,8 @@ export class InputAutocomplete extends TemplatesContainer(
   @state() hasInputPrefix = false;
   _resizeController = new ResizeController(this, {});
 
+  @state() isPopVisible = false;
+
   /**
    * Les dataProviders
    */
@@ -100,7 +103,6 @@ export class InputAutocomplete extends TemplatesContainer(
   private updateSearchParameter = (value: string) => {
     if (value == "") {
       this.lastValidSearch = "";
-
       return;
     }
     const found = this.queryQueueListItem(
@@ -116,6 +118,10 @@ export class InputAutocomplete extends TemplatesContainer(
     }
   };
 
+  private updatePopContentVisibility = (value: string) => {
+    this.isPopVisible = (value?.length || 0) >= this.minSearchLength;
+  };
+
   private initSearchParameter = () => {
     this.queryQueueListItem(
       this.initQueueDataProvider,
@@ -133,8 +139,6 @@ export class InputAutocomplete extends TemplatesContainer(
   };
 
   private findSearchedItem = (listItem: ListItem) => {
-    console.log(this.propertyName);
-
     const value =
       this.propertyName === "_self"
         ? listItem
@@ -174,8 +178,12 @@ export class InputAutocomplete extends TemplatesContainer(
   };
 
   connectedCallback() {
+    console.log(this.value, this.getAttribute("value"));
+
     super.connectedCallback();
 
+    console.log(this.value, this.getAttribute("value"));
+
     /**
      * Nom de la valeur de recherche
      * Si non défini, on utilise name
@@ -225,6 +233,8 @@ export class InputAutocomplete extends TemplatesContainer(
      * et qu'elle est différente de la derniere recherche valide on désactive la selection
      */
     this.countPublisher?.onAssign(this.updateActiveSelection);
+
+    this.searchPublisher?.onAssign(this.updatePopContentVisibility);
   }
 
   disconnectedCallback() {
@@ -237,6 +247,8 @@ export class InputAutocomplete extends TemplatesContainer(
     getPublisher(this.initQueueDataProvider).delete();
     getPublisher(this.searchDataProvider).delete();
     getPublisher(this.queueDataProvider).delete();
+
+    this.searchPublisher?.offAssign(this.updatePopContentVisibility);
   }
 
   /**
@@ -297,10 +309,11 @@ export class InputAutocomplete extends TemplatesContainer(
           name="${ifDefined(this.searchParameter || this.name)}"
           placeholder="${ifDefined(this.placeholder)}"
           ?readonly="${this.readonly}"
-          autocomplete="off"
+          autocomplete="${Math.random()}"
           clearable
           inlineContent
           size=${this.size}
+          value="${ifDefined(this.searchPublisher?.get() || this.value)}"
         >
           <slot
             name="prefix"
@@ -322,7 +335,9 @@ export class InputAutocomplete extends TemplatesContainer(
         <sonic-menu
           slot="content"
           class="custom-scroll"
-          style="${this.offsetWidth ? `width: ${this.offsetWidth}px` : ""}"
+          style="${this.offsetWidth
+            ? `width: ${this.offsetWidth}px`
+            : ""}; display:${this.isPopVisible ? "block" : "none"};"
         >
           <sonic-queue
             dataProvider="${this.queueDataProvider}"
@@ -336,7 +351,7 @@ export class InputAutocomplete extends TemplatesContainer(
           </sonic-queue>
           <sonic-queue
             noLazyload
-            noLoader
+            loader="no-loader"
             dataProvider="${this.initQueueDataProvider}"
             filteredFields=${this.filteredFields}
             dataProviderExpression="${this.dataProviderExpression}"

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

@@ -213,13 +213,15 @@ export class Pop extends LitElement {
     this.resizeObserver.observe(this.popContent);
   }
   disconnectedCallback(): void {
+    if (this.popContent) {
+      this.resizeObserver.unobserve(this.popContent);
+    }
     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) {

package/src/core/directives/DataProvider.ts

@@ -1,9 +1,12 @@
-import {AsyncDirective, PartInfo} from "lit/async-directive.js";
-import {directive} from "lit/directive.js";
-import {PublisherManager, PublisherProxy} from "@supersoniks/concorde/core/utils/PublisherProxy";
-import {noChange} from "lit";
+import { AsyncDirective, PartInfo } from "lit/async-directive.js";
+import { directive } from "lit/directive.js";
+import {
+  PublisherManager,
+  PublisherProxy,
+} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { noChange } from "lit";
 import Objects from "../utils/Objects";
-import {SearchableDomElement} from "../utils/HTML";
+import { SearchableDomElement } from "../utils/HTML";
 import Publisher from "../utils/PublisherProxy";
 type Observable = PublisherProxy | string | (() => unknown);
 function getObservables(observable: Observable): Set<PublisherProxy> {
@@ -28,7 +31,9 @@ function getObservables(observable: Observable): Set<PublisherProxy> {
 class ObserveDirective extends AsyncDirective {
   observables: Set<PublisherProxy> = new Set();
   unsubscribe(): void {
-    this.observables.forEach((publisher: PublisherProxy) => publisher.offAssign(this.onAssign));
+    this.observables.forEach((publisher: PublisherProxy) =>
+      publisher.offAssign(this.onAssign)
+    );
   }
   observable?: Observable;
   node?: SearchableDomElement;

package/src/core/mixins/FormElement.ts

@@ -157,6 +157,7 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       )
         value = "";
       if (this._value == value) return;
+      if (!value) console.trace(this.name, this._value, value);
       this._value = value;
       this.updateDataValue();
       this.requestUpdate();
@@ -281,6 +282,9 @@ const Form = <T extends Constructor<SubscriberInterface>>(superClass: T) => {
       this.formDataProvider = this.getAncestorAttributeValue(
         "formDataProvider"
       ) as string;
+      if (this.value) {
+        this.setAttribute("value", this.value as string);
+      }
       super.connectedCallback();
       this.addKeyboardNavigation();
     }

package/src/core/utils/Objects.ts

@@ -1,4 +1,4 @@
-import {TypeAndRecordOfType} from "../_types/types";
+import { TypeAndRecordOfType } from "../_types/types";
 
 class Objects {
   /**
@@ -38,7 +38,10 @@ class Objects {
       const val2 = object2[key];
       const areObjects = Objects.isObject(val1) && Objects.isObject(val2);
       const areEqual = useStrictComparaison ? val1 !== val2 : val1 != val2;
-      if ((areObjects && !Objects.deepEqual(val1, val2)) || (!areObjects && areEqual)) {
+      if (
+        (areObjects && !Objects.deepEqual(val1, val2)) ||
+        (!areObjects && areEqual)
+      ) {
         return false;
       }
     }
@@ -83,13 +86,19 @@ class Objects {
     return obj;
   }
   /*eslint-enable @typescript-eslint/no-explicit-any*/
-  static getURLSearchArray(sourceObject?: TypeAndRecordOfType<string>, prefix = "") {
+  static getURLSearchArray(
+    sourceObject?: TypeAndRecordOfType<string>,
+    prefix = ""
+  ) {
     let arr: string[] = [];
     for (let key in sourceObject) {
       const value = (sourceObject as TypeAndRecordOfType<string>)[key];
       if (prefix) key = prefix + "[" + key + "]";
       if (Objects.isObject(value)) {
-        arr = [...arr, ...this.getURLSearchArray(value as TypeAndRecordOfType<string>, key)];
+        arr = [
+          ...arr,
+          ...this.getURLSearchArray(value as TypeAndRecordOfType<string>, key),
+        ];
       } else {
         arr.push(`${key}=${value}`);
       }