@kubex/zinc 1.1.66 → 1.1.67

package/dist/custom-elements.json

@@ -7860,6 +7860,10 @@
             {
               "description": "Slot for custom empty state.",
               "name": "empty-state"
+            },
+            {
+              "description": "Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.",
+              "name": "no-results"
             }
           ],
           "members": [
@@ -8213,7 +8217,7 @@
               "kind": "field",
               "name": "hasSlotController",
               "privacy": "private",
-              "default": "new HasSlotController( this, '[default]', ActionSlots.search.valueOf(), ActionSlots.delete.valueOf(), ActionSlots.modify.valueOf(), ActionSlots.create.valueOf(), ActionSlots.filter.valueOf(), ActionSlots.sort.valueOf(), ActionSlots.inputs.valueOf(), 'empty-state' )"
+              "default": "new HasSlotController( this, '[default]', ActionSlots.search.valueOf(), ActionSlots.delete.valueOf(), ActionSlots.modify.valueOf(), ActionSlots.create.valueOf(), ActionSlots.filter.valueOf(), ActionSlots.sort.valueOf(), ActionSlots.inputs.valueOf(), 'empty-state', 'no-results' )"
             },
             {
               "kind": "field",
@@ -8994,7 +8998,7 @@
           "tagNameWithoutPrefix": "data-table",
           "tagName": "zn-data-table",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-alert\n * @dependency zn-button\n * @dependency zn-empty-state\n * @dependency zn-chip\n * @dependency zn-hover-container\n * @dependency zn-dropdown\n * @dependency zn-menu\n * @dependency zn-menu-item\n * @dependency zn-button-group\n * @dependency zn-confirm\n * @dependency zn-skeleton\n * @dependency zn-data-table-search\n *\n * @slot - The default slot.\n * @slot search - Slot for search component.\n * @slot sort - Slot for sort component.\n * @slot filter - Slot for filter component.\n * @slot filter-top - Slot for top-level filter component.\n * @slot delete-action - Slot for delete action button.\n * @slot modify-action - Slot for modify action button.\n * @slot create-action - Slot for create action button.\n * @slot inputs - Slot for additional input controls.\n * @slot empty-state - Slot for custom empty state.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-alert\n * @dependency zn-button\n * @dependency zn-empty-state\n * @dependency zn-chip\n * @dependency zn-hover-container\n * @dependency zn-dropdown\n * @dependency zn-menu\n * @dependency zn-menu-item\n * @dependency zn-button-group\n * @dependency zn-confirm\n * @dependency zn-skeleton\n * @dependency zn-data-table-search\n *\n * @slot - The default slot.\n * @slot search - Slot for search component.\n * @slot sort - Slot for sort component.\n * @slot filter - Slot for filter component.\n * @slot filter-top - Slot for top-level filter component.\n * @slot delete-action - Slot for delete action button.\n * @slot modify-action - Slot for modify action button.\n * @slot create-action - Slot for create action button.\n * @slot inputs - Slot for additional input controls.\n * @slot empty-state - Slot for custom empty state.\n * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
           "documentation": "https://zinc.style/components/data-table",
           "status": "experimental",
           "since": "1.0",
@@ -42310,7 +42314,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.66",
+    "version": "1.1.67",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -1079,7 +1079,7 @@
     },
     {
       "name": "zn-data-table",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         { "name": "data-uri", "values": [] },
         { "name": "data", "values": [{ "name": "Row[]" }, { "name": "Row" }] },

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.66",
+  "version": "1.1.67",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2411,7 +2411,7 @@
         },
         {
           "name": "zn-data-table",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "data-uri", "value": { "type": "string" } },
@@ -2523,6 +2523,10 @@
             {
               "name": "empty-state",
               "description": "Slot for custom empty state."
+            },
+            {
+              "name": "no-results",
+              "description": "Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows."
             }
           ],
           "events": [],

package/dist/zn.d.ts

@@ -3526,6 +3526,7 @@ declare module "components/data-table/data-table.component" {
      * @slot create-action - Slot for create action button.
      * @slot inputs - Slot for additional input controls.
      * @slot empty-state - Slot for custom empty state.
+     * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.
      *
      * @csspart base - The component's base wrapper.
      *

package/dist/zn.min.js

@@ -653,7 +653,7 @@ import{a as Cn,b as i_,c as sr,d as c,e as F}from"./chunks/zn.UBLZO6CI.js";var Q
       <div class="table__collum--datetime">
         <span><strong>${o.slice(0,10)}</strong></span>
         <zn-style size="s" muted>${o.slice(11)}</zn-style>
-      </div>`})},yt=class extends C{constructor(){super(...arguments);this.data=[];this.sortDirection="asc";this.localSort=!1;this.filter="";this.search="";this.key="id";this.headers={};this.displayTemplates={};this.hiddenHeaders="{}";this.hiddenColumns="{}";this.unsortableHeaders="{}";this.unsortable=!1;this.standalone=!1;this.emptyStateIcon="data_alert";this.filters=[];this.method="POST";this.noInitialLoad=!1;this.groupBy="";this.groups="";this.itemsPerPage=Hh;this._initialLoad=!0;this._hasLoadedData=!1;this._lastLoadHadRows=!1;this._lastTableContent=u``;this.resizeObserver=new Jt(this,{target:null,callback:()=>{this.tableContainer&&this.tableContainer.scrollIntoView({behavior:"smooth",block:"nearest"})}});this.page=Xb;this._rows=[];this.numberOfRowsSelected=0;this.selectedRows=[];this.hasSlotController=new Q(this,"[default]","search".valueOf(),"delete-action".valueOf(),"modify-action".valueOf(),"create-action".valueOf(),"filter".valueOf(),"sort".valueOf(),"inputs".valueOf(),"empty-state");this._dataTask=new al(this,{task:async([t,r],{signal:n})=>{if(t===void 0||this.noInitialLoad&&this._initialLoad)return{rows:[],page:1,perPage:this.itemsPerPage,total:0};this.groupBy&&(this.itemsPerPage=1e3);let a={page:this.page,perPage:this.itemsPerPage,sortColumn:this.sortColumn,sortDirection:this.sortDirection,filter:this.filter,search:this.search},s=this.hasSlotController.getSlots("inputs".valueOf()),l={};s&&(s.forEach(h=>{if(["zn-input","zn-select","zn-query-builder","zn-multiselect","zn-params-select","zn-datepicker","input","select","textarea"].includes(h.tagName.toLowerCase())){let f=h.value||h.getAttribute("value"),b=h.name||h.getAttribute("name");b&&(l[b]=f)}}),Object.assign(a,l)),r&&typeof r=="object"&&Object.assign(a,r);let d=await fetch(t,{method:this.method,headers:{"x-kx-fetch-style":"zn-data-table"},signal:n,credentials:"same-origin",body:this.method==="POST"?JSON.stringify(a):void 0});if(!d.ok)throw new Error(d.statusText);return d.json()},args:()=>[this.dataUri,this.requestParams]});this.rowHasActions=!1;this._expandedRows=new Set;this._hiddenCells=new Map;this._formatTemplates=Qk;this.requestParams={};this.filterChangeListener=t=>{t.target instanceof Lh&&(this.filter=t.target.value,this._dataTask.run().then(r=>r))};this.searchChangeListener=t=>{let r=t.target;if(r&&r.tagName==="ZN-DATA-TABLE-SEARCH"){if(this.search=r.value,t.detail){let{formData:n,searchUri:a}=t.detail;if(n&&typeof n=="object"&&(this.requestParams={...this.requestParams,...n}),a){let s=this.dataUri;this.dataUri=a,this._dataTask.run().then(()=>{this.dataUri=s});return}}this._dataTask.run().then(n=>n)}}}refresh(){this._initialLoad=!1,this._dataTask.run().then(t=>t)}render(){let t=u``;if(this.noInitialLoad&&this._initialLoad)t=u`
+      </div>`})},yt=class extends C{constructor(){super(...arguments);this.data=[];this.sortDirection="asc";this.localSort=!1;this.filter="";this.search="";this.key="id";this.headers={};this.displayTemplates={};this.hiddenHeaders="{}";this.hiddenColumns="{}";this.unsortableHeaders="{}";this.unsortable=!1;this.standalone=!1;this.emptyStateIcon="data_alert";this.filters=[];this.method="POST";this.noInitialLoad=!1;this.groupBy="";this.groups="";this.itemsPerPage=Hh;this._initialLoad=!0;this._hasLoadedData=!1;this._lastLoadHadRows=!1;this._lastTableContent=u``;this.resizeObserver=new Jt(this,{target:null,callback:()=>{this.tableContainer&&this.tableContainer.scrollIntoView({behavior:"smooth",block:"nearest"})}});this.page=Xb;this._rows=[];this.numberOfRowsSelected=0;this.selectedRows=[];this.hasSlotController=new Q(this,"[default]","search".valueOf(),"delete-action".valueOf(),"modify-action".valueOf(),"create-action".valueOf(),"filter".valueOf(),"sort".valueOf(),"inputs".valueOf(),"empty-state","no-results");this._dataTask=new al(this,{task:async([t,r],{signal:n})=>{if(t===void 0||this.noInitialLoad&&this._initialLoad)return{rows:[],page:1,perPage:this.itemsPerPage,total:0};this.groupBy&&(this.itemsPerPage=1e3);let a={page:this.page,perPage:this.itemsPerPage,sortColumn:this.sortColumn,sortDirection:this.sortDirection,filter:this.filter,search:this.search},s=this.hasSlotController.getSlots("inputs".valueOf()),l={};s&&(s.forEach(h=>{if(["zn-input","zn-select","zn-query-builder","zn-multiselect","zn-params-select","zn-datepicker","input","select","textarea"].includes(h.tagName.toLowerCase())){let f=h.value||h.getAttribute("value"),b=h.name||h.getAttribute("name");b&&(l[b]=f)}}),Object.assign(a,l)),r&&typeof r=="object"&&Object.assign(a,r);let d=await fetch(t,{method:this.method,headers:{"x-kx-fetch-style":"zn-data-table"},signal:n,credentials:"same-origin",body:this.method==="POST"?JSON.stringify(a):void 0});if(!d.ok)throw new Error(d.statusText);return d.json()},args:()=>[this.dataUri,this.requestParams]});this.rowHasActions=!1;this._expandedRows=new Set;this._hiddenCells=new Map;this._formatTemplates=Qk;this.requestParams={};this.filterChangeListener=t=>{t.target instanceof Lh&&(this.filter=t.target.value,this._dataTask.run().then(r=>r))};this.searchChangeListener=t=>{let r=t.target;if(r&&r.tagName==="ZN-DATA-TABLE-SEARCH"){if(this.search=r.value,t.detail){let{formData:n,searchUri:a}=t.detail;if(n&&typeof n=="object"&&(this.requestParams={...this.requestParams,...n}),a){let s=this.dataUri;this.dataUri=a,this._dataTask.run().then(()=>{this.dataUri=s});return}}this._dataTask.run().then(n=>n)}}}refresh(){this._initialLoad=!1,this._dataTask.run().then(t=>t)}render(){let t=u``;if(this.noInitialLoad&&this._initialLoad)t=u`
         <slot name="empty-state"></slot>`;else if(this.dataUri)t=this._dataTask.render({pending:()=>this._initialLoad||!this._hasLoadedData||!this._lastLoadHadRows?u`
               <div>${this.loadingTable()}</div>`:u`
             <div class="reduced-opacity">${this._lastTableContent}</div>`,complete:a=>(this._initialLoad=!1,this._hasLoadedData=!0,this._lastLoadHadRows=(a?.rows?.length??0)>0,this._lastTableContent=u`
@@ -669,7 +669,15 @@ import{a as Cn,b as i_,c as sr,d as c,e as F}from"./chunks/zn.UBLZO6CI.js";var Q
         ${r?this.getTableHeader():u``}
         ${t}
       </div>
-    `}connectedCallback(){super.connectedCallback(),this.addEventListener("zn-filter-change",this.filterChangeListener),this.addEventListener("zn-search-change",this.searchChangeListener)}getTemplate(t){return this.displayTemplates[t]??this._formatTemplates[t]}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("zn-filter-change",this.filterChangeListener),this.removeEventListener("zn-search-change",this.searchChangeListener)}emptyState(){return this.hasSlotController.test("empty-state")?u`
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("zn-filter-change",this.filterChangeListener),this.addEventListener("zn-search-change",this.searchChangeListener)}getTemplate(t){return this.displayTemplates[t]??this._formatTemplates[t]}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("zn-filter-change",this.filterChangeListener),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`
+        <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>
         </div>`:u`

package/package.json

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

@@ -178,6 +178,7 @@ type AllowedInputElement =
  * @slot create-action - Slot for create action button.
  * @slot inputs - Slot for additional input controls.
  * @slot empty-state - Slot for custom empty state.
+ * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.
  *
  * @csspart base - The component's base wrapper.
  *
@@ -288,7 +289,8 @@ export default class ZnDataTable extends ZincElement {
     ActionSlots.filter.valueOf(),
     ActionSlots.sort.valueOf(),
     ActionSlots.inputs.valueOf(),
-    'empty-state'
+    'empty-state',
+    'no-results'
   );
 
   private _dataTask = new Task(this, {
@@ -501,6 +503,22 @@ 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>`;
+    }
+
     if (this.hasSlotController.test('empty-state')) {
       return html`
         <div class="table--empty">

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

@@ -73,6 +73,52 @@ describe('<zn-data-table>', () => {
     }
   });
 
+  it('shows the empty-state slot before any load on a no-initial-load table, then a no-results state after an empty search', 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" no-initial-load headers='{"name": {"key": "name", "label": "Name"}}'>
+          <div slot="empty-state" id="filters-prompt">No Filters Selected</div>
+        </zn-data-table>`);
+
+      expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.exist;
+
+      el.refresh();
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-empty-state'));
+
+      expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.not.exist;
+      const emptyState = el.shadowRoot!.querySelector('zn-empty-state')!;
+      expect(emptyState.getAttribute('caption')).to.equal('No Results Found');
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  it('prefers the no-results slot after an empty search on a no-initial-load 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" no-initial-load headers='{"name": {"key": "name", "label": "Name"}}'>
+          <div slot="empty-state">No Filters Selected</div>
+          <div slot="no-results">No Customers Found</div>
+        </zn-data-table>`);
+
+      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('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;