@kubex/zinc 1.1.65 → 1.1.66

package/dist/custom-elements.json

@@ -8132,6 +8132,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_lastLoadHadRows",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_lastTableContent",
@@ -42301,7 +42310,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.65",
+    "version": "1.1.66",
     "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.65",
+  "version": "1.1.66",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.d.ts

@@ -3578,6 +3578,7 @@ declare module "components/data-table/data-table.component" {
         selectAllButton: ZnButton;
         private _initialLoad;
         private _hasLoadedData;
+        private _lastLoadHadRows;
         private _lastTableContent;
         private readonly resizeObserver;
         private page;

package/dist/zn.min.js

@@ -653,16 +653,16 @@ 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._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`
-        <slot name="empty-state"></slot>`;else if(this.dataUri)t=this._dataTask.render({pending:()=>this._initialLoad||!this._hasLoadedData?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");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._lastTableContent=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`
             <div>${this.renderTable(a)}</div>`,this._lastTableContent),error:a=>{if(a instanceof Error){if(a.name==="SyntaxError")return console.debug(a.message),u`
                 <zn-sp>
                   <zn-alert level="error">Unable to load data</zn-alert>
                 </zn-sp>`;if(a.message==="Not Found")return this.emptyState()}return u`
-            <div>${a}</div>`}});else if(Array.isArray(this.data)?this.data.length>0:this.data){let a=Array.isArray(this.data)?this.data:[this.data],s={rows:a,perPage:a.length,total:a.length,page:1};this._initialLoad=!1,this._hasLoadedData=!0,this._lastTableContent=u`
-            <div>${this.renderTable(s)}</div>`,t=this._lastTableContent}let r=this.hasSlotController.test("delete-action".valueOf())||this.hasSlotController.test("modify-action".valueOf())||this.hasSlotController.test("create-action".valueOf())||this.hasSlotController.test("sort".valueOf())||this.hasSlotController.test("filter".valueOf())||this.hasSlotController.test("filter-top".valueOf())||this.hasSlotController.test("search".valueOf()),n=this.hasSlotController.test("inputs".valueOf());return u`
+            <div>${a}</div>`}});else if(Array.isArray(this.data)?this.data.length>0:this.data){let a=Array.isArray(this.data)?this.data:[this.data],s={rows:a,perPage:a.length,total:a.length,page:1};this._initialLoad=!1,this._hasLoadedData=!0,this._lastLoadHadRows=a.length>0,this._lastTableContent=u`
+        <div>${this.renderTable(s)}</div>`,t=this._lastTableContent}let r=this.hasSlotController.test("delete-action".valueOf())||this.hasSlotController.test("modify-action".valueOf())||this.hasSlotController.test("create-action".valueOf())||this.hasSlotController.test("sort".valueOf())||this.hasSlotController.test("filter".valueOf())||this.hasSlotController.test("filter-top".valueOf())||this.hasSlotController.test("search".valueOf()),n=this.hasSlotController.test("inputs".valueOf());return u`
       <div class="table-container" ${Fa(a=>this.tableContainer=a)}>
         ${n?u`
           <slot name="${"inputs".valueOf()}" style="display: none"></slot>`:null}
@@ -691,7 +691,8 @@ import{a as Cn,b as i_,c as sr,d as c,e as F}from"./chunks/zn.UBLZO6CI.js";var Q
       <zn-alert level="${t.level??"error"}"
                 icon="${H(t.icon)}"
                 size="small"
-                center>${t.text}</zn-alert>`}humanize(t){return t.charAt(0).toUpperCase()+t.slice(1)}renderTableData(t,r){let n=Object.values(this.headers).filter(h=>h.hideHeader||h.hideColumn||Object.values(this.hiddenColumns).includes(h.key)?!1:!h.secondary);this._secondaryHeaders=Object.values(this.headers).filter(h=>h.hideColumn||Object.values(this.hiddenColumns).includes(h.key)?!1:h.secondary===!0),this.rowHasActions=this._rows.some(h=>h.actions&&h.actions.length>0);let a=new Set(this._secondaryHeaders.map(h=>h.key));this._hiddenCells.clear();let s=new Map;this._rows.forEach(h=>{let m=Array.isArray(h.cells)?h.cells:[],f=[],b=m.filter(g=>a.has(g.column));this._hiddenCells.set(h.id,b),n.forEach(g=>{let v=m.find(x=>x.column===g.key);v?f.push(v):f.push({text:"",column:g.key})}),s.set(h.id,f)});let l=this.hasHiddenColumns(),d=n.length+(this.rowHasActions?1:0)+(l?1:0);return u`
+                center>${t.text}
+      </zn-alert>`}humanize(t){return t.charAt(0).toUpperCase()+t.slice(1)}renderTableData(t,r){let n=Object.values(this.headers).filter(h=>h.hideHeader||h.hideColumn||Object.values(this.hiddenColumns).includes(h.key)?!1:!h.secondary);this._secondaryHeaders=Object.values(this.headers).filter(h=>h.hideColumn||Object.values(this.hiddenColumns).includes(h.key)?!1:h.secondary===!0),this.rowHasActions=this._rows.some(h=>h.actions&&h.actions.length>0);let a=new Set(this._secondaryHeaders.map(h=>h.key));this._hiddenCells.clear();let s=new Map;this._rows.forEach(h=>{let m=Array.isArray(h.cells)?h.cells:[],f=[],b=m.filter(g=>a.has(g.column));this._hiddenCells.set(h.id,b),n.forEach(g=>{let v=m.find(x=>x.column===g.key);v?f.push(v):f.push({text:"",column:g.key})}),s.set(h.id,f)});let l=this.hasHiddenColumns(),d=n.length+(this.rowHasActions?1:0)+(l?1:0);return u`
       <div style="overflow-x: auto">
         <table class="${D({table:!0,"table--standalone":this.standalone,"with-hover":!this.unsortable&&!this.hideCheckboxes})}">
           <thead>

package/package.json

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

@@ -111,8 +111,8 @@ interface HeaderConfig {
   hideColumn?: boolean;
   secondary?: boolean;
   type?: string;
-  cellTemplate ?: Cell;
-  ifEmpty ?:Cell;
+  cellTemplate?: Cell;
+  ifEmpty?: Cell;
 }
 
 type DisplayTemplate = (cell: Cell, row: Row, header: HeaderConfig) =>
@@ -250,12 +250,13 @@ export default class ZnDataTable extends ZincElement {
 
   @property() groups = '';
 
-  @property({attribute: 'per-page-size', type:Number}) itemsPerPage:number = DEFAULT_PER_PAGE;
+  @property({attribute: 'per-page-size', type: Number}) itemsPerPage: number = DEFAULT_PER_PAGE;
   @query('#select-all-rows') selectAllButton: ZnButton;
 
   // Data Table Properties
   private _initialLoad = true;
   private _hasLoadedData = false;
+  private _lastLoadHadRows = false;
   private _lastTableContent: TemplateResult = html``;
 
   private readonly resizeObserver = new ResizeController(this, {
@@ -375,8 +376,10 @@ export default class ZnDataTable extends ZincElement {
       tableBody = this._dataTask.render({
         pending: () => {
           // Show the skeleton until data has rendered at least once, so the
-          // first fetch on a no-initial-load table doesn't render blank space
-          if (this._initialLoad || !this._hasLoadedData) {
+          // first fetch on a no-initial-load table doesn't render blank space.
+          // Also show it when the last load had no rows - a reduced-opacity
+          // empty state gives no visible indication that a search is running
+          if (this._initialLoad || !this._hasLoadedData || !this._lastLoadHadRows) {
             return html`
               <div>${this.loadingTable()}</div>`;
           }
@@ -386,6 +389,7 @@ export default class ZnDataTable extends ZincElement {
         complete: (data) => {
           this._initialLoad = false;
           this._hasLoadedData = true;
+          this._lastLoadHadRows = ((data as Response)?.rows?.length ?? 0) > 0;
           this._lastTableContent = html`
             <div>${this.renderTable(data as Response)}</div>`;
           return this._lastTableContent;
@@ -416,8 +420,9 @@ export default class ZnDataTable extends ZincElement {
       };
       this._initialLoad = false;
       this._hasLoadedData = true;
+      this._lastLoadHadRows = rows.length > 0;
       this._lastTableContent = html`
-            <div>${this.renderTable(response)}</div>`;
+        <div>${this.renderTable(response)}</div>`;
       tableBody = this._lastTableContent;
     }
 
@@ -605,7 +610,8 @@ export default class ZnDataTable extends ZincElement {
       <zn-alert level="${error.level ?? 'error'}"
                 icon="${ifDefined(error.icon)}"
                 size="small"
-                center>${error.text}</zn-alert>`;
+                center>${error.text}
+      </zn-alert>`;
   }
 
   public humanize(str: string) {
@@ -996,7 +1002,7 @@ export default class ZnDataTable extends ZincElement {
   renderCell(data: Cell, row?: Row, header?: HeaderConfig): TemplateResult | ZincElement {
     const fn = (header?.type ? this.getTemplate(header.type) : undefined);
 
-    if((!data.text && !data.iconSrc) && header?.ifEmpty !== undefined) {
+    if ((!data.text && !data.iconSrc) && header?.ifEmpty !== undefined) {
       const header2 = {...header, type: undefined, render: undefined, renderTemplate: undefined};
       return this.renderCell({...data, ...header.ifEmpty}, row, header2)
     }
@@ -1006,11 +1012,11 @@ export default class ZnDataTable extends ZincElement {
       return typeof out === 'string' ? html`${unsafeHTML(out)}` : out;
     }
 
-    if(!data || typeof data !== 'object') {
+    if (!data || typeof data !== 'object') {
       return data;
     }
 
-    if(header?.cellTemplate !== undefined) {
+    if (header?.cellTemplate !== undefined) {
       data = {...header.cellTemplate, ...data}
     }
 

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

@@ -49,6 +49,30 @@ describe('<zn-data-table>', () => {
     }
   });
 
+  it('shows the loading skeleton on reload when the previous load returned no rows', async () => {
+    const originalFetch = window.fetch;
+    const emptyResponse = () => new Response(JSON.stringify({rows: [], page: 1, perPage: 10, total: 0}),
+      {status: 200, headers: {'Content-Type': 'application/json'}});
+    window.fetch = () => Promise.resolve(emptyResponse());
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" headers='{"name": {"key": "name", "label": "Name"}}'></zn-data-table>`);
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-empty-state'));
+
+      let release: (value: Response) => void;
+      window.fetch = () => new Promise<Response>(resolve => (release = resolve));
+      el.refresh();
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-skeleton'));
+      expect(el.shadowRoot!.querySelector('zn-skeleton')).to.exist;
+
+      release!(emptyResponse());
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-empty-state'));
+    } 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;