@kubex/zinc 1.1.44 → 1.1.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +10 -1
- package/dist/web-types.json +1 -1
- package/dist/zn.d.ts +1 -0
- package/dist/zn.min.js +6 -5
- package/package.json +1 -1
- package/src/components/content-block/content-block.component.ts +1 -0
- package/src/components/content-block/content-block.scss +7 -8
- package/src/components/data-table/data-table.component.ts +6 -1
|
@@ -7723,6 +7723,15 @@
|
|
|
7723
7723
|
"privacy": "private",
|
|
7724
7724
|
"default": "true"
|
|
7725
7725
|
},
|
|
7726
|
+
{
|
|
7727
|
+
"kind": "field",
|
|
7728
|
+
"name": "_hasLoadedData",
|
|
7729
|
+
"type": {
|
|
7730
|
+
"text": "boolean"
|
|
7731
|
+
},
|
|
7732
|
+
"privacy": "private",
|
|
7733
|
+
"default": "false"
|
|
7734
|
+
},
|
|
7726
7735
|
{
|
|
7727
7736
|
"kind": "field",
|
|
7728
7737
|
"name": "_lastTableContent",
|
|
@@ -40200,7 +40209,7 @@
|
|
|
40200
40209
|
"package": {
|
|
40201
40210
|
"name": "@kubex/zinc",
|
|
40202
40211
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
40203
|
-
"version": "1.1.
|
|
40212
|
+
"version": "1.1.45",
|
|
40204
40213
|
"author": "",
|
|
40205
40214
|
"license": "MIT"
|
|
40206
40215
|
}
|
package/dist/web-types.json
CHANGED
package/dist/zn.d.ts
CHANGED
|
@@ -3539,6 +3539,7 @@ declare module "components/data-table/data-table.component" {
|
|
|
3539
3539
|
itemsPerPage: number;
|
|
3540
3540
|
selectAllButton: ZnButton;
|
|
3541
3541
|
private _initialLoad;
|
|
3542
|
+
private _hasLoadedData;
|
|
3542
3543
|
private _lastTableContent;
|
|
3543
3544
|
private readonly resizeObserver;
|
|
3544
3545
|
private page;
|
package/dist/zn.min.js
CHANGED
|
@@ -652,15 +652,15 @@ import{a as _n,b as R1,c as nr,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var H
|
|
|
652
652
|
<div class="table__collum--datetime">
|
|
653
653
|
<span><strong>${o.slice(0,10)}</strong></span>
|
|
654
654
|
<zn-style size="s" muted>${o.slice(11)}</zn-style>
|
|
655
|
-
</div>`})},zt=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=Pb;this._initialLoad=!0;this._lastTableContent=u``;this.resizeObserver=new Zt(this,{target:null,callback:()=>{this.tableContainer&&this.tableContainer.scrollIntoView({behavior:"smooth",block:"nearest"})}});this.page=Ob;this._rows=[];this.numberOfRowsSelected=0;this.selectedRows=[];this.hasSlotController=new J(this,"[default]","search".valueOf(),"delete-action".valueOf(),"modify-action".valueOf(),"create-action".valueOf(),"filter".valueOf(),"sort".valueOf(),"inputs".valueOf(),"empty-state");this._dataTask=new el(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=AS;this.requestParams={};this.filterChangeListener=t=>{t.target instanceof yh&&(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`
|
|
656
|
-
<slot name="empty-state"></slot>`;else if(this.dataUri)t=this._dataTask.render({pending:()=>this._initialLoad?u`
|
|
655
|
+
</div>`})},zt=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=Pb;this._initialLoad=!0;this._hasLoadedData=!1;this._lastTableContent=u``;this.resizeObserver=new Zt(this,{target:null,callback:()=>{this.tableContainer&&this.tableContainer.scrollIntoView({behavior:"smooth",block:"nearest"})}});this.page=Ob;this._rows=[];this.numberOfRowsSelected=0;this.selectedRows=[];this.hasSlotController=new J(this,"[default]","search".valueOf(),"delete-action".valueOf(),"modify-action".valueOf(),"create-action".valueOf(),"filter".valueOf(),"sort".valueOf(),"inputs".valueOf(),"empty-state");this._dataTask=new el(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=AS;this.requestParams={};this.filterChangeListener=t=>{t.target instanceof yh&&(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`
|
|
656
|
+
<slot name="empty-state"></slot>`;else if(this.dataUri)t=this._dataTask.render({pending:()=>this._initialLoad||!this._hasLoadedData?u`
|
|
657
657
|
<div>${this.loadingTable()}</div>`:u`
|
|
658
|
-
<div class="reduced-opacity">${this._lastTableContent}</div>`,complete:a=>(this._initialLoad=!1,this._lastTableContent=u`
|
|
658
|
+
<div class="reduced-opacity">${this._lastTableContent}</div>`,complete:a=>(this._initialLoad=!1,this._hasLoadedData=!0,this._lastTableContent=u`
|
|
659
659
|
<div>${this.renderTable(a)}</div>`,this._lastTableContent),error:a=>{if(a instanceof Error){if(a.name==="SyntaxError")return console.debug(a.message),u`
|
|
660
660
|
<zn-sp>
|
|
661
661
|
<zn-alert level="error">Unable to load data</zn-alert>
|
|
662
662
|
</zn-sp>`;if(a.message==="Not Found")return this.emptyState()}return u`
|
|
663
|
-
<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._lastTableContent=u`
|
|
663
|
+
<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`
|
|
664
664
|
<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`
|
|
665
665
|
<div class="table-container" ${Ra(a=>this.tableContainer=a)}>
|
|
666
666
|
${n?u`
|
|
@@ -3780,7 +3780,7 @@ ${ua(this.code(o,t))}
|
|
|
3780
3780
|
<zn-button icon="keyboard_arrow_down"></zn-button>
|
|
3781
3781
|
</zn-button-group>
|
|
3782
3782
|
</div>
|
|
3783
|
-
`}checkValidity(){return this._isButton()&&this.button?this.button.checkValidity():!0}getForm(){return this.formControlController.getForm()}reportValidity(){return this._isButton()&&this.button?this.button.reportValidity():!0}setCustomValidity(t){this._isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}get validity(){return this._isButton()&&this.button?this.button.validity:Se}get validationMessage(){return this._isButton()&&this.button?this.button.validationMessage:""}_isButton(){return this.type==="submit"||this.type==="button"||this.type==="reset"}};Tr.styles=T(__),c([p()],Tr.prototype,"caption",2),c([p()],Tr.prototype,"href",2),c([p()],Tr.prototype,"name",2),c([p()],Tr.prototype,"value",2),c([fe()],Tr.prototype,"defaultValue",2),c([p()],Tr.prototype,"type",2),c([V("zn-dropdown")],Tr.prototype,"dropdown",2),c([V("zn-button#trigger-btn")],Tr.prototype,"button",2);var O6=Tr;Tr.define("zn-split-button");var k_=A`@charset "UTF-8";@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-inline:calc(var(--zn-gutter,0) + var(--zn-base-gap,0))}:host *,:host *::before,:host *::after{box-sizing:border-box}.content-block-header{display:flex;align-items:center;gap:
|
|
3783
|
+
`}checkValidity(){return this._isButton()&&this.button?this.button.checkValidity():!0}getForm(){return this.formControlController.getForm()}reportValidity(){return this._isButton()&&this.button?this.button.reportValidity():!0}setCustomValidity(t){this._isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}get validity(){return this._isButton()&&this.button?this.button.validity:Se}get validationMessage(){return this._isButton()&&this.button?this.button.validationMessage:""}_isButton(){return this.type==="submit"||this.type==="button"||this.type==="reset"}};Tr.styles=T(__),c([p()],Tr.prototype,"caption",2),c([p()],Tr.prototype,"href",2),c([p()],Tr.prototype,"name",2),c([p()],Tr.prototype,"value",2),c([fe()],Tr.prototype,"defaultValue",2),c([p()],Tr.prototype,"type",2),c([V("zn-dropdown")],Tr.prototype,"dropdown",2),c([V("zn-button#trigger-btn")],Tr.prototype,"button",2);var O6=Tr;Tr.define("zn-split-button");var k_=A`@charset "UTF-8";@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-inline:calc(var(--zn-gutter,0) + var(--zn-base-gap,0))}:host *,:host *::before,:host *::after{box-sizing:border-box}.content-block-header{display:flex;align-items:center;gap:var(--zn-spacing-small);width:100%;max-width:100%;padding-block:var(--zn-spacing-small);position:relative}.content-block--collapsible .content-block-header{cursor:pointer}.content-block-header__icon{display:flex;align-items:center;flex-shrink:0}.content-block-header__main{display:flex;flex-direction:row;align-items:center;gap:var(--zn-spacing-small);min-width:0;flex-grow:1;overflow:hidden}.content-block-header__caption{font-weight:var(--zn-text-h1-font-weight);font-size:var(--zn-text-h1-font-size);color:rgba(var(--zn-text-panel-title),100%);line-height:var(--zn-icon-size,20px);margin:0;display:flex;align-items:center;gap:var(--zn-spacing-small);flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content-block-header__description{flex:1 1 auto;min-width:0;font-size:var(--zn-font-size-medium);color:rgb(var(--zn-text-muted));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}.content-block-header__actions{display:flex;align-items:center;gap:var(--zn-spacing-small);margin-left:auto;flex-shrink:0}.content-block--short zn-sp{display:none}.content-block--short .content-block-header__description{display:block}@container (max-width:599px){.content-block--short .content-block-header__description{display:none}}.text-section{font-family:var(--zn-font-sans);font-size:var(--zn-text-paragraph-font-size);font-weight:var(--zn-text-paragraph-font-weight);line-height:var(--zn-text-paragraph-line-height);color:var(--zn-text-paragraph-color);text-transform:var(--zn-text-paragraph-transform)}.text-section a{font-size:var(--zn-font-size-small);opacity:0.8}.hidden{display:none}ol{counter-reset:list-0 0}@supports (counter-set:none){ol li,ul li{counter-set:list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0}}ol,ul{padding:0;margin:0}li[data-list=checked]>.ql-ui,li[data-list=unchecked]>.ql-ui{color:#777}li{list-style-type:none;position:relative}ul>li::before{content:"•"}ol>li{counter-increment:list-0}ol>li::before{content:counter(list-0) ". "}li[data-list=checked]::before{content:"☑"}li[data-list=unchecked]::before{content:"☐"}li[data-list=checked]::before,li[data-list=unchecked]::before{color:#777}ol li::before,ul li::before{display:inline-block;margin-left:-1.5em;margin-right:0.3em;text-align:right;white-space:nowrap;width:1.2em}li:has(>.ql-ui)::before{content:none;display:none}`;var mr=class extends C{constructor(){super(...arguments);this.time="";this.sender="";this.avatar="";this.outbound=!1;this.noCollapse=!1;this.short=!1;this.defaultDisplay="text";this.hasSlotController=new J(this,"text","html");this._textRows=[];this._footerObserver=new Ot(this,{target:null,config:{subtree:!0,childList:!0,attributes:!0,attributeFilter:["href","download","caption"]},callback:()=>this._debouncedReplace()});this._replaceDebounce=0}connectedCallback(){super.connectedCallback(),this.iframe.then(t=>{if(t.contentDocument){let r=this.htmlNodes[0];if(r){let n=r?.innerHTML??"";n=n.replace(/ /g," "),n=n.replace(/</g,"<"),n=n.replace(/>/g,">"),n=n.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"");let a="<style>body,html{background-color: #ffffff}img{max-width:100%; max-height: 500px;}</style>";t.srcdoc=a+n}}t.addEventListener("load",()=>{setTimeout(()=>this._resizeIframe(t),50)})})}disconnectedCallback(){this._replaceDebounce&&(clearTimeout(this._replaceDebounce),this._replaceDebounce=0),super.disconnectedCallback()}_collapseContent(t){this.noCollapse||t.composedPath().some(n=>n instanceof HTMLElement&&n.classList.contains("content-block-header__actions"))||(this.short=!this.short,this.requestUpdate(),this.updateComplete.then(()=>{this.short||this.iframe.then(n=>{n&&!n.classList.contains("hidden")&&this._resizeIframe(n)})}))}_toggleText(){let t=this.shadowRoot?.querySelector(".text-content");this.iframe.then(r=>{t&&(r.classList.add("hidden"),t.classList.remove("hidden"))})}_toggleHtml(){let t=this.shadowRoot?.querySelector(".text-content");this.iframe.then(r=>{t&&(r.classList.remove("hidden"),t.classList.add("hidden"),setTimeout(()=>this._resizeIframe(r),0))})}_resizeIframe(t){let r=n=>{let a=n.contentDocument;if(!a)return;n.style.height="auto";let s=a.body,l=a.documentElement,d=[s?.scrollHeight??0,l?.scrollHeight??0,s?.offsetHeight??0,l?.offsetHeight??0],h=Math.max(...d);h>0&&(n.style.height=`${h}px`)};t?r(t):this.iframe.then(n=>{n?.contentDocument&&requestAnimationFrame(()=>r(n))})}firstUpdated(t){super.firstUpdated(t);let r=this.shadowRoot?.querySelectorAll(".text-section");r&&r.length>0&&r.forEach(n=>{n.innerHTML=n.innerHTML.replace(/ /g," "),n.innerHTML=n.innerHTML.replace(/<!--[\s\S]*?-->/g,""),n.innerHTML=n.innerHTML.replace(/<\/p><br>/g,"</p>")})}render(){let t=this.getTextSections(),r=this.querySelector(':scope > [slot="footer"]')!==null,n=this.hasSlotController.test("text"),a=this.hasSlotController.test("html"),s=n&&a,l=a&&(!n||this.defaultDisplay==="html");return u`
|
|
3784
3784
|
<div class="${N({"content-block--outbound":this.outbound,"content-block--short":this.short,"content-block--collapsible":!this.noCollapse})}">
|
|
3785
3785
|
|
|
3786
3786
|
<div class="content-block-header" @click="${this._collapseContent}">
|
|
@@ -3788,6 +3788,7 @@ ${ua(this.code(o,t))}
|
|
|
3788
3788
|
<slot name="icon">
|
|
3789
3789
|
<zn-icon src="${this.avatar}"
|
|
3790
3790
|
library="avatar"
|
|
3791
|
+
size="36"
|
|
3791
3792
|
round></zn-icon>
|
|
3792
3793
|
</slot>
|
|
3793
3794
|
</div>
|
package/package.json
CHANGED
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
.content-block-header {
|
|
17
17
|
display: flex;
|
|
18
18
|
align-items: center;
|
|
19
|
-
gap:
|
|
19
|
+
gap: var(--zn-spacing-small);
|
|
20
20
|
width: 100%;
|
|
21
21
|
max-width: 100%;
|
|
22
|
-
padding: var(--zn-
|
|
22
|
+
padding-block: var(--zn-spacing-small);
|
|
23
23
|
position: relative;
|
|
24
24
|
}
|
|
25
25
|
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
display: flex;
|
|
38
38
|
flex-direction: row;
|
|
39
39
|
align-items: center;
|
|
40
|
-
gap:
|
|
40
|
+
gap: var(--zn-spacing-small);
|
|
41
41
|
min-width: 0;
|
|
42
42
|
flex-grow: 1;
|
|
43
43
|
overflow: hidden;
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
margin: 0;
|
|
52
52
|
display: flex;
|
|
53
53
|
align-items: center;
|
|
54
|
-
gap: var(--zn-spacing-
|
|
54
|
+
gap: var(--zn-spacing-small);
|
|
55
55
|
flex-shrink: 0;
|
|
56
56
|
overflow: hidden;
|
|
57
57
|
white-space: nowrap;
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
.content-block-header__actions {
|
|
73
73
|
display: flex;
|
|
74
74
|
align-items: center;
|
|
75
|
-
gap:
|
|
75
|
+
gap: var(--zn-spacing-small);
|
|
76
76
|
margin-left: auto;
|
|
77
77
|
flex-shrink: 0;
|
|
78
78
|
}
|
|
@@ -92,11 +92,10 @@
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
.text-section {
|
|
95
|
-
|
|
96
|
-
line-height: 19px;
|
|
95
|
+
@include wc.text-style(paragraph);
|
|
97
96
|
|
|
98
97
|
a {
|
|
99
|
-
font-size:
|
|
98
|
+
font-size: var(--zn-font-size-small);
|
|
100
99
|
opacity: 0.8;
|
|
101
100
|
}
|
|
102
101
|
}
|
|
@@ -245,6 +245,7 @@ export default class ZnDataTable extends ZincElement {
|
|
|
245
245
|
|
|
246
246
|
// Data Table Properties
|
|
247
247
|
private _initialLoad = true;
|
|
248
|
+
private _hasLoadedData = false;
|
|
248
249
|
private _lastTableContent: TemplateResult = html``;
|
|
249
250
|
|
|
250
251
|
private readonly resizeObserver = new ResizeController(this, {
|
|
@@ -363,7 +364,9 @@ export default class ZnDataTable extends ZincElement {
|
|
|
363
364
|
} else if (this.dataUri) {
|
|
364
365
|
tableBody = this._dataTask.render({
|
|
365
366
|
pending: () => {
|
|
366
|
-
|
|
367
|
+
// Show the skeleton until data has rendered at least once, so the
|
|
368
|
+
// first fetch on a no-initial-load table doesn't render blank space
|
|
369
|
+
if (this._initialLoad || !this._hasLoadedData) {
|
|
367
370
|
return html`
|
|
368
371
|
<div>${this.loadingTable()}</div>`;
|
|
369
372
|
}
|
|
@@ -372,6 +375,7 @@ export default class ZnDataTable extends ZincElement {
|
|
|
372
375
|
},
|
|
373
376
|
complete: (data) => {
|
|
374
377
|
this._initialLoad = false;
|
|
378
|
+
this._hasLoadedData = true;
|
|
375
379
|
this._lastTableContent = html`
|
|
376
380
|
<div>${this.renderTable(data as Response)}</div>`;
|
|
377
381
|
return this._lastTableContent;
|
|
@@ -401,6 +405,7 @@ export default class ZnDataTable extends ZincElement {
|
|
|
401
405
|
page: 1,
|
|
402
406
|
};
|
|
403
407
|
this._initialLoad = false;
|
|
408
|
+
this._hasLoadedData = true;
|
|
404
409
|
this._lastTableContent = html`
|
|
405
410
|
<div>${this.renderTable(response)}</div>`;
|
|
406
411
|
tableBody = this._lastTableContent;
|