@kubex/zinc 1.1.128 → 1.1.130

package/package.json

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

package/src/components/page-builder/page-builder.component.ts

@@ -666,6 +666,19 @@ export default class ZnPageBuilder extends ZincElement {
     this._commit({ sections: this._patchSection(id, s => ({ ...s, columns: next })) });
   }
 
+  /**
+   * Snaps the field back to the width the container will use. A re-render alone
+   * would not: once the state already sits at a bound, an out-of-range entry
+   * changes nothing to re-render from.
+   */
+  private _onColumnsEntered(section: PageSection, input: ZnInput) {
+    const type = this.registry.get(section.type);
+    if (type?.slotsMax === undefined) return;
+    const next = slotColumns({...section, columns: Number(input.value)}, type);
+    input.value = String(next);
+    this.setSectionColumns(section.id, next);
+  }
+
   private _removeSection(id: string) {
     if (this._isPinned(id)) return;
     const [removed, sections] = this._extract(id);
@@ -1229,9 +1242,9 @@ export default class ZnPageBuilder extends ZincElement {
               label="Slots per row"
               min="${type.slotsMin ?? 1}"
               max="${type.slotsMax}"
-              help-text="A new row is added as the last one fills."
+              help-text="Between ${type.slotsMin ?? 1} and ${type.slotsMax}. A new row is added as the last one fills."
               .value="${String(slotColumns(section, type))}"
-              @zn-change="${(e: Event) => this.setSectionColumns(section.id, Number((e.target as ZnInput).value))}"></zn-input>`}
+              @zn-change="${(e: Event) => this._onColumnsEntered(section, e.target as ZnInput)}"></zn-input>`}
           ${type?.renderConfig
             ? type.renderConfig(section, data => this._updateSectionData(section.id, data))
             : this._form}

package/src/components/page-builder/page-builder.test.ts

@@ -476,6 +476,38 @@ describe('<zn-page-builder>', () => {
       .to.have.length(6);
   });
 
+  it('should snap an out-of-range width back on every entry and state the range', async () => {
+    const el = await fixture<ZnPageBuilder>(html`
+      <zn-page-builder config='{"sections":[{"id":"row","type":"category-row","data":{}}]}'>
+        <template type="category-row" slot="config" label="Category Row" slots="3" slots-max="4"></template>
+      </zn-page-builder>`);
+    await el.updateComplete;
+
+    el.shadowRoot?.querySelector('.canvas zn-page-section-card')?.dispatchEvent(new Event('click'));
+    await el.updateComplete;
+
+    const width = el.shadowRoot!.querySelector<HTMLInputElement>('.inspector__slots')!;
+    expect(width.getAttribute('help-text'), 'the control names its range').to.contain('1 and 4');
+
+    const enter = async (value: string) => {
+      width.value = value;
+      width.dispatchEvent(new Event('zn-change', {bubbles: true}));
+      await el.updateComplete;
+    };
+
+    await enter('9');
+    expect(el.state.sections[0].columns, 'clamped to the max').to.equal(4);
+    expect(width.value, 'and shown clamped').to.equal('4');
+
+    await enter('9');
+    expect(width.value, 'a second over-max entry snaps back too').to.equal('4');
+    expect(el.state.sections[0].columns).to.equal(4);
+
+    await enter('0');
+    expect(el.state.sections[0].columns, 'clamped to the min').to.equal(1);
+    expect(width.value).to.equal('1');
+  });
+
   it('should clamp a container width to the declared bounds', async () => {
     const el = await fixture<ZnPageBuilder>(html`
       <zn-page-builder config='{"sections":[{"id":"row","type":"category-row","data":{},"columns":99}]}'>

package/src/components/page-builder/page.types.ts

@@ -64,7 +64,8 @@ export const MAX_SLOTS = 24;
 export function slotColumns(section: PageSection, type: PageSectionType): number {
   const columns = type.slots ?? 0;
   if (type.slotsMax === undefined) return columns;
-  return Math.min(Math.max(section.columns ?? columns, type.slotsMin ?? 1), type.slotsMax);
+  const chosen = Math.round(Number(section.columns ?? NaN));
+  return Math.min(Math.max(Number.isFinite(chosen) ? chosen : columns, type.slotsMin ?? 1), type.slotsMax);
 }
 
 /**