@supersoniks/concorde 3.1.80 → 3.1.82

package/package.json

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

package/src/core/components/functional/list/list.demo.ts

@@ -47,9 +47,9 @@ export class ListDemo extends LitElement {
           dataprovider="api/users"
           key="data"
           class="grid grid-cols-1 gap-4"
-          .items=${this.items}
-          .noItems=${this.noItems}
-          .skeleton=${this.skeleton}
+          items=${this.items}
+          noItems=${this.noItems}
+          skeleton=${this.skeleton}
           debug
         ></sonic-list>
       </div>

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

@@ -69,10 +69,23 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
   @property() limit = Number.POSITIVE_INFINITY;
   @property() offset = 0;
 
-  @property({ type: Object }) items?: ListItems;
-  @property({ type: Object }) noItems?: () => DirectiveResult;
-  @property({ type: Object }) skeleton?: () => DirectiveResult;
-  @property({ type: Object }) separator?: () => DirectiveResult;
+  _items?: ListItems;
+
+  @property({
+    type: Function,
+  }) /**add a getter setter check if the value is a ListItems befor assignation */
+  get items(): ListItems | undefined {
+    return this._items;
+  }
+  set items(value: ListItems) {
+    if (typeof value !== "function" && value !== undefined) return;
+    this._items = value;
+    this.requestUpdate();
+  }
+
+  @property({ type: Function }) noItems?: () => DirectiveResult;
+  @property({ type: Function }) skeleton?: () => DirectiveResult;
+  @property({ type: Function }) separator?: () => DirectiveResult;
 
   connectedCallback() {
     this.noShadowDom = "";

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

@@ -33,9 +33,9 @@ const tagName = "sonic-queue";
 export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
   @property({ type: Array }) templates: Array<HTMLTemplateElement> | null =
     null;
-  @property({ type: Object }) items: ListItems | null = null;
-  @property({ type: Object }) noItems: ListItems | null = null;
-  @property({ type: Object }) skeleton: ListItems | null = null;
+  @property({ type: Function }) items: ListItems | null = null;
+  @property({ type: Function }) noItems: ListItems | null = null;
+  @property({ type: Function }) skeleton: ListItems | null = null;
   lastRequestTime = 0;
   key = "";
 

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

@@ -76,4 +76,21 @@
       </sonic-menu>
     </sonic-pop>
   </template>
+</sonic-code>
+
+
+## manual
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block" manual id="manualPop">
+      <sonic-button onclick="alert('customAction without opening Pop content')">Manual doesn't open on click</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item>Hourra !</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5"  variant="outline">
+      <sonic-icon name="sparkles" library="custom"></sonic-icon>
+      Click to open pop
+    </sonic-button>
+  </template>
 </sonic-code>

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

@@ -64,6 +64,7 @@ export class Pop extends LitElement {
   @query("slot[name=content]") popContent!: HTMLElement;
   @property({ type: Boolean }) noToggle = false;
   @property({ type: Boolean, reflect: true }) inline = false;
+  @property({ type: Boolean }) manual = false;
 
   /**
    * Ombre
@@ -191,7 +192,7 @@ export class Pop extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    if (Pop.pops.size == 0) {
+    if (Pop.pops.size == 0 && !this.manual) {
       document.addEventListener("pointerdown", this._handleClosePop);
       document.addEventListener("click", this._handleClosePop);
       document.addEventListener("keydown", this._handleKeyDown);
@@ -213,7 +214,7 @@ export class Pop extends LitElement {
     }
     super.disconnectedCallback();
     Pop.pops.delete(this);
-    if (Pop.pops.size == 0) {
+    if (Pop.pops.size == 0 && !this.manual) {
       document.removeEventListener("pointerdown", this._handleClosePop);
       document.removeEventListener("click", this._handleClosePop);
       document.removeEventListener("keydown", this._handleKeyDown);
@@ -342,8 +343,8 @@ export class Pop extends LitElement {
   render() {
     return html`
       <slot
-        @click=${this.toggle}
-        @keydown=${this.toggle}
+        @click=${this.manual ? () => {} : this.toggle}
+        @keydown=${this.manual ? () => {} : this.toggle}
         class="contents"
       ></slot>
       <slot