@kubex/zinc 1.1.129 → 1.1.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.129",
+  "version": "1.1.131",
   "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;

package/src/components/panel/panel.component.ts

@@ -1,7 +1,7 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
-import {property} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './panel.scss';
@@ -43,8 +43,13 @@ export default class ZnPanel extends ZincElement {
   @property({type: Boolean}) transparent: boolean;
   @property({type: Boolean}) shadow: boolean;
 
+  @state() private bodyEmpty = false;
+
+  private resizeObserver: ResizeObserver | null = null;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
+    this.observeBodyContent();
     if (this.basis) {
       this.style.setProperty('--zn-panel-basis', this.basis.toString() + 'px');
     }
@@ -63,6 +68,10 @@ export default class ZnPanel extends ZincElement {
 
   connectedCallback() {
     super.connectedCallback();
+    if (this.hasUpdated) {
+      this.observeBodyContent();
+    }
+
     if (window.CSS.registerProperty) {
       try {
         window.CSS.registerProperty({
@@ -77,14 +86,42 @@ export default class ZnPanel extends ZincElement {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  private get bodySlot(): HTMLSlotElement | null {
+    return this.renderRoot?.querySelector('.panel__body > slot') ?? null;
+  }
+
+  // Slotted content can grow without the body's own box changing, so the observers go on the
+  // slotted elements rather than the body.
+  private observeBodyContent() {
+    const slot = this.bodySlot;
+    if (!slot) return;
+
+    this.resizeObserver ??= new ResizeObserver(() => this.measureBodyContent());
+    this.resizeObserver.disconnect();
+    slot.assignedElements({flatten: true}).forEach(el => this.resizeObserver!.observe(el));
+    this.measureBodyContent();
+  }
+
+  private measureBodyContent() {
+    const nodes = this.bodySlot?.assignedNodes({flatten: true}) ?? [];
+    this.bodyEmpty = !nodes.some(node => node.nodeType === Node.TEXT_NODE
+      ? node.textContent!.trim() !== ''
+      : (node as Element).getBoundingClientRect().height > 0);
+  }
+
   protected render(): unknown {
     const hasActionSlot = this.hasSlotController.test('actions');
     const hasFooterSlot = this.hasSlotController.test('footer');
     const hasHeader = this.caption || hasActionSlot;
-    // Transparent panels with no vertical body padding have nothing to separate the header from,
-    // so the underline is just a stray rule across the page.
+    const isBodyEmpty = !this.hasSlotController.test('[default]') || this.bodyEmpty;
     const isFlushY = this.flush || this.tabbed || this.flushY;
-    const underlineHeader = !this.headerBorderless && !(this.transparent && isFlushY);
+    const underlineHeader = !this.headerBorderless && !(this.transparent && isFlushY) && !isBodyEmpty;
 
     return html`
       <div class="${classMap({
@@ -97,6 +134,7 @@ export default class ZnPanel extends ZincElement {
         'panel--transparent': this.transparent,
         'panel--has-actions': hasActionSlot,
         'panel--has-footer': hasFooterSlot,
+        'panel--empty': isBodyEmpty,
         'panel--has-header': hasHeader,
         'panel--borderless-header': this.headerBorderless,
         'panel--cosmic': this.cosmic,
@@ -120,7 +158,7 @@ export default class ZnPanel extends ZincElement {
 
           <div class="panel__content">
             <div class="panel__body">
-              <slot></slot>
+              <slot @slotchange="${this.observeBodyContent}"></slot>
             </div>
           </div>
 

package/src/components/panel/panel.scss

@@ -111,6 +111,12 @@
     padding-top: 0;
   }
 
+  &--empty {
+    .panel__body {
+      padding: 0;
+    }
+  }
+
   &--flush {
     .panel__body {
       padding: 0;

package/src/components/panel/panel.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 
 describe('<zn-panel>', () => {
   it('should render a component', async () => {
@@ -9,16 +9,52 @@ describe('<zn-panel>', () => {
   });
 
   it('underlines panel headers by default', async () => {
-    const el = await fixture(html` <zn-panel caption="Example"></zn-panel> `);
+    const el = await fixture(html` <zn-panel caption="Example"><p>Content</p></zn-panel> `);
     const header = el.shadowRoot!.querySelector('.panel__header')!;
 
     expect(header.classList.contains('panel__header--underline')).to.be.true;
   });
 
   it('removes the header underline when header-borderless is set', async () => {
-    const el = await fixture(html` <zn-panel caption="Example" header-borderless></zn-panel> `);
+    const el = await fixture(html` <zn-panel caption="Example" header-borderless><p>Content</p></zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    expect(header.classList.contains('panel__header--underline')).to.be.false;
+  });
+
+  it('removes the header underline and body padding when there is no content', async () => {
+    const el = await fixture(html` <zn-panel caption="Example"></zn-panel> `);
     const header = el.shadowRoot!.querySelector('.panel__header')!;
 
     expect(header.classList.contains('panel__header--underline')).to.be.false;
+    expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.true;
+  });
+
+  it('removes the header underline when slotted content renders nothing', async () => {
+    const el = await fixture(html` <zn-panel caption="Example">
+      <div id="wrapper"></div>
+    </zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    await waitUntil(() => !header.classList.contains('panel__header--underline'));
+
+    expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.true;
+  });
+
+  it('restores the header underline when slotted content gains height', async () => {
+    const el = await fixture(html` <zn-panel caption="Example">
+      <div id="wrapper"></div>
+    </zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    await waitUntil(() => !header.classList.contains('panel__header--underline'));
+
+    const child = document.createElement('div');
+    child.style.height = '20px';
+    el.querySelector('#wrapper')!.append(child);
+
+    await waitUntil(() => header.classList.contains('panel__header--underline'));
+
+    expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.false;
   });
 });