@kubex/zinc 1.1.129 → 1.1.130

package/dist/custom-elements.json

@@ -9189,6 +9189,15 @@
               "kind": "field",
               "name": "searchChangeListener"
             },
+            {
+              "kind": "field",
+              "name": "isNarrowed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "emptyState"
@@ -52701,7 +52710,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.129",
+    "version": "1.1.130",
     "author": "",
     "license": "MIT"
   }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.129",
+  "version": "1.1.130",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.d.ts

@@ -4177,6 +4177,7 @@ declare module "components/data-table/data-table.component" {
         filterClearListener: (e: Event) => void;
         filterChangeListener: (e: ZnFilterChangeEvent) => void;
         searchChangeListener: (e: ZnSearchChangeEvent) => void;
+        private get isNarrowed();
         emptyState(): TemplateResult<1>;
         renderTable(data: Response): TemplateResult<1>;
         private renderErrorAlert;

package/dist/zn.min.js

@@ -1227,23 +1227,21 @@ import{a as Fn,b as h3,c as _r,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var K
             ${t}
             ${this.getTableFooter()}`}
       </div>
-    `}connectedCallback(){super.connectedCallback(),this.addEventListener("zn-filter-change",this.filterChangeListener),this.addEventListener("zn-clear",this.filterClearListener),this.addEventListener("zn-search-change",this.searchChangeListener)}updated(t){super.updated(t),this.publishFilterSuggestions()}publishFilterSuggestions(){let t=this.querySelector("zn-data-table-filter");if(!t||this._rows.length===0)return;let r={};this._rows.forEach(a=>a.cells.forEach(s=>{let l=s.text?.trim();if(!l)return;let p=r[s.column]??(r[s.column]=[]);p.length<C4&&!p.includes(l)&&p.push(l)}));let n=JSON.stringify(r);n!==this._suggestionsKey&&(this._suggestionsKey=n,t.suggestions=r)}getTemplate(t){return this.displayTemplates[t]??this._formatTemplates[t]}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("zn-filter-change",this.filterChangeListener),this.removeEventListener("zn-clear",this.filterClearListener),this.removeEventListener("zn-search-change",this.searchChangeListener)}emptyState(){return this.noInitialLoad&&!this._initialLoad?this.hasSlotController.test("no-results")?u`
-          <div class="table--empty">
-            <slot name="no-results"></slot>
-          </div>`:u`
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("zn-filter-change",this.filterChangeListener),this.addEventListener("zn-clear",this.filterClearListener),this.addEventListener("zn-search-change",this.searchChangeListener)}updated(t){super.updated(t),this.publishFilterSuggestions()}publishFilterSuggestions(){let t=this.querySelector("zn-data-table-filter");if(!t||this._rows.length===0)return;let r={};this._rows.forEach(a=>a.cells.forEach(s=>{let l=s.text?.trim();if(!l)return;let p=r[s.column]??(r[s.column]=[]);p.length<C4&&!p.includes(l)&&p.push(l)}));let n=JSON.stringify(r);n!==this._suggestionsKey&&(this._suggestionsKey=n,t.suggestions=r)}getTemplate(t){return this.displayTemplates[t]??this._formatTemplates[t]}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("zn-filter-change",this.filterChangeListener),this.removeEventListener("zn-clear",this.filterClearListener),this.removeEventListener("zn-search-change",this.searchChangeListener)}get isNarrowed(){return this.search.length>0||this.filter.length>0}emptyState(){return this.isNarrowed||this.noInitialLoad&&!this._initialLoad?u`
         <div class="table--empty">
-          <zn-empty-state caption="No Results Found" icon="search">
-            <p>Nothing matched your search. Try adjusting your filters.</p>
-          </zn-empty-state>
-        </div>`:this.hasSlotController.test("empty-state")?u`
-        <div class="table--empty">
-          <slot name="empty-state"></slot>
+          <slot name="no-results">
+            <zn-empty-state caption="No Results Found" icon="search">
+              <p>Nothing matched your search. Try adjusting your filters.</p>
+            </zn-empty-state>
+          </slot>
         </div>`:u`
       <div class="table--empty">
-        <zn-empty-state
-          caption="${this.emptyStateCaption?this.emptyStateCaption:this.caption?"No "+this.caption.toLowerCase()+" found":"No data found"}"
-          icon="${this.emptyStateIcon}">
-        </zn-empty-state>
+        <slot name="empty-state">
+          <zn-empty-state
+            caption="${this.emptyStateCaption?this.emptyStateCaption:this.caption?"No "+this.caption.toLowerCase()+" found":"No data found"}"
+            icon="${this.emptyStateIcon}">
+          </zn-empty-state>
+        </slot>
       </div>`}renderTable(t){this.itemsPerPage=Math.max(rm,t.perPage??rm),this.page=Math.max(1,t.page??T0),this._totalRows=Math.max(0,t.total??0),this.totalPages=Math.ceil(Math.max(1,t.total)/this.itemsPerPage);let r=t?.error?.text?t.error:void 0;if(!t?.rows||t.rows.length===0)return u`${r?u`
         <div class="table__error">${this.renderErrorAlert(r)}</div>`:B}${this.emptyState()}`;if(this._rows=this.getRows(t),this.groupBy){let n={},a=this.groups.split(",").map(h=>h.trim()).filter(h=>h.length>0),s=a.includes("*"),l=new Set(a.filter(h=>h!=="*").map(h=>this.humanize(h)));l.forEach(h=>{n[h]||(n[h]=[])}),s&&(n["*"]=[]),this._rows.forEach(h=>{let m=h.cells.find(g=>g.column===this.groupBy),f=m?m.text:"Ungrouped",b=this.humanize(f);if(l.has(b)){n[b].push(h);return}if(s){n["*"].push(h);return}(!this.groups||b==="Ungrouped")&&(n[b]||(n[b]=[]),n[b].push(h))}),Object.keys(n).forEach(h=>{n[h].length===0&&delete n[h]});let p=Object.keys(n).map(h=>({label:h==="Ungrouped"||h==="*"?"":h,rows:n[h]}));return this.renderTableData(p,r)}return this.renderTableData([{label:"",rows:this._rows}],r)}renderErrorAlert(t){return u`
       <zn-alert level="${t.level??"error"}"
@@ -1439,7 +1437,7 @@ import{a as Fn,b as h3,c as _r,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var K
           <zn-hover-container placement="${l}" flip>
             ${s}
             <div slot="content">
-                ${St(t.hoverContent)}
+              ${St(t.hoverContent)}
             </div>
           </zn-hover-container>`}return t.copyable&&(s=u`
         ${s}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.129",
+  "version": "1.1.130",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/data-table/data-table.component.ts

@@ -641,36 +641,32 @@ export default class ZnDataTable extends ZincElement {
     }
   }
 
-  emptyState() {
-    if (this.noInitialLoad && !this._initialLoad) {
-      if (this.hasSlotController.test('no-results')) {
-        return html`
-          <div class="table--empty">
-            <slot name="no-results"></slot>
-          </div>`;
-      }
-
-      return html`
-        <div class="table--empty">
-          <zn-empty-state caption="No Results Found" icon="search">
-            <p>Nothing matched your search. Try adjusting your filters.</p>
-          </zn-empty-state>
-        </div>`;
-    }
+  // A table narrowed by a search or filter has rows, just none matching them, so
+  // its empty state must not claim there is nothing to create
+  private get isNarrowed(): boolean {
+    return this.search.length > 0 || this.filter.length > 0;
+  }
 
-    if (this.hasSlotController.test('empty-state')) {
+  emptyState() {
+    if (this.isNarrowed || (this.noInitialLoad && !this._initialLoad)) {
       return html`
         <div class="table--empty">
-          <slot name="empty-state"></slot>
+          <slot name="no-results">
+            <zn-empty-state caption="No Results Found" icon="search">
+              <p>Nothing matched your search. Try adjusting your filters.</p>
+            </zn-empty-state>
+          </slot>
         </div>`;
     }
 
     return html`
       <div class="table--empty">
-        <zn-empty-state
-          caption="${this.emptyStateCaption ? this.emptyStateCaption : (this.caption ? "No " + this.caption.toLowerCase() + " found" : "No data found")}"
-          icon="${this.emptyStateIcon}">
-        </zn-empty-state>
+        <slot name="empty-state">
+          <zn-empty-state
+            caption="${this.emptyStateCaption ? this.emptyStateCaption : (this.caption ? "No " + this.caption.toLowerCase() + " found" : "No data found")}"
+            icon="${this.emptyStateIcon}">
+          </zn-empty-state>
+        </slot>
       </div>`;
   }
 
@@ -1323,9 +1319,9 @@ export default class ZnDataTable extends ZincElement {
           size="${ifDefined(size)}"
           color="${ifDefined(color)}"
           ${ref(el => {
-        if (!el) return;
-        tokens.forEach(t => el.setAttribute(t, ''));
-      })}
+            if (!el) return;
+            tokens.forEach(t => el.setAttribute(t, ''));
+          })}
           title="${ifDefined(data.title)}"
         ></zn-icon> ${content}`;
     }
@@ -1345,7 +1341,7 @@ export default class ZnDataTable extends ZincElement {
           <zn-hover-container placement="${placement}" flip>
             ${content}
             <div slot="content">
-                ${unsafeHTML(data.hoverContent)}
+              ${unsafeHTML(data.hoverContent)}
             </div>
           </zn-hover-container>`;
       }

package/src/components/data-table/data-table.test.ts

@@ -230,6 +230,52 @@ describe('<zn-data-table>', () => {
     }
   });
 
+  it('shows a no-results state when a filter empties a normally loading table', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = () => Promise.resolve(new Response(JSON.stringify({rows: [], page: 1, perPage: 10, total: 0}),
+      {status: 200, headers: {'Content-Type': 'application/json'}}));
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" headers='{"name": {"key": "name", "label": "Name"}}'>
+          <div slot="empty-state" id="nothing-created">Nothing created yet</div>
+          <div slot="no-results" id="nothing-matched">Nothing matched</div>
+        </zn-data-table>`);
+
+      await waitUntil(() => el.shadowRoot?.querySelector('slot[name="empty-state"]'));
+      expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.exist;
+
+      el.filter = 'eyJrZXkiOiJ0eXBlIn0=';
+      el.refresh();
+      await waitUntil(() => el.shadowRoot?.querySelector('slot[name="no-results"]'));
+
+      expect(el.shadowRoot!.querySelector('slot[name="no-results"]')).to.exist;
+      expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.not.exist;
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  it('shows a no-results state when a search empties a normally loading table', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = () => Promise.resolve(new Response(JSON.stringify({rows: [], page: 1, perPage: 10, total: 0}),
+      {status: 200, headers: {'Content-Type': 'application/json'}}));
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" search="nothing" headers='{"name": {"key": "name", "label": "Name"}}'>
+          <div slot="empty-state">Nothing created yet</div>
+        </zn-data-table>`);
+
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-empty-state'));
+
+      expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.not.exist;
+      expect(el.shadowRoot!.querySelector('zn-empty-state')!.getAttribute('caption')).to.equal('No Results Found');
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
   it('exposes displayTemplates as an object property', async () => {
     const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
     const templates = (el as unknown as {displayTemplates: Record<string, unknown>}).displayTemplates;