kempo 2.5.1 → 2.6.0
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/components/Table.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1){super(),this.registerProps({fields:[],records:[]}),e&&this.setData(e,t)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){this.shadowRoot.getElementById("fields").innerHTML=this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.fields.map((({name:t})
|
|
1
|
+
import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1){super(),this.registerProps({fields:[],records:[]}),e&&this.setData(e,t)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){this.shadowRoot.getElementById("fields").innerHTML=this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.fields.map((({name:t})=>{let s=e[t]||"";return Array.isArray(s)&&(s=s.join(", ")),`<td>${s}</td>`})).join("")}</tr>`)).join("")}setData(e,t=!1){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n ${super.shadowTemplate}\n <div class="responsive-table">\n <table>\n <thead id="fields"></thead>\n <tbody id="records"></tbody>\n </table>\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n margin-bottom: var(--spacer);\n }\n `}static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>s.add(e)))})),[...s].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
<a href="#requirements">Requirements</a><br />
|
|
23
23
|
<a href="#properties">Properties</a><br />
|
|
24
24
|
<a href="#methods">Methods</a><br />
|
|
25
|
+
<a href="#arrays">Displaying Arrays</a><br />
|
|
25
26
|
</div>
|
|
26
27
|
</details>
|
|
27
28
|
|
|
@@ -107,6 +108,23 @@
|
|
|
107
108
|
]);
|
|
108
109
|
</script>
|
|
109
110
|
|
|
111
|
+
<h3 id="arrays"><a href="#arrays" class="no-link">Displaying Arrays</a></h3>
|
|
112
|
+
<p>The table component can display arrays of strings or numbers by joining them with a comma and a space.</p>
|
|
113
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"hobbies"</span>></span><span class="hljs-tag"></<span class="hljs-name">k-table</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'hobbies'</span>).setData([<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Dustin"</span>,<br /> <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">"Reading"</span>, <span class="hljs-string">"Hiking"</span>, <span class="hljs-string">"Gaming"</span>]<br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Kayla"</span>,<br /> <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">"Cooking"</span>, <span class="hljs-string">"Traveling"</span>]<br /> }<br /> ]);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
114
|
+
<k-table id="hobbies"></k-table>
|
|
115
|
+
<script type="module">
|
|
116
|
+
document.getElementById('hobbies').setData([
|
|
117
|
+
{
|
|
118
|
+
name: "Dustin",
|
|
119
|
+
hobbies: ["Reading", "Hiking", "Gaming"]
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
name: "Kayla",
|
|
123
|
+
hobbies: ["Cooking", "Traveling"]
|
|
124
|
+
}
|
|
125
|
+
]);
|
|
126
|
+
</script>
|
|
127
|
+
|
|
110
128
|
<h3 id="constructor"><a href="#consttructor" class="no-link">Constructor</a></h3>
|
|
111
129
|
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
112
130
|
<h5>
|
|
@@ -139,10 +157,10 @@
|
|
|
139
157
|
<h5><code>setData(<i><Array>object</i> records, <i><Array>object</i> fields)<i>: undefined</i></code></h5>
|
|
140
158
|
<p>Sets the records and the fields and renders the table, if no fields are provided then they will be automatically generated from the keys of the first 100 records.</p>
|
|
141
159
|
|
|
142
|
-
<h5><code>renderFields()<i>: undefined</i></
|
|
160
|
+
<h5><code>renderFields()<i>: undefined</i></h5>
|
|
143
161
|
<p>Renders the fields as table headers, this is called automatically by setData, you should never have to call it.</p>
|
|
144
162
|
|
|
145
|
-
<h5><code>renderRecords()<i>: undefined</i></
|
|
163
|
+
<h5><code>renderRecords()<i>: undefined</i></h5>
|
|
146
164
|
<p>Renders the records as table row, this is called automatically by setData, you should never have to call it.</p>
|
|
147
165
|
|
|
148
166
|
</main>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1){super(),this.registerProps({fields:[],records:[]}),e&&this.setData(e,t)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){this.shadowRoot.getElementById("fields").innerHTML=this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.fields.map((({name:t})
|
|
1
|
+
import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1){super(),this.registerProps({fields:[],records:[]}),e&&this.setData(e,t)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){this.shadowRoot.getElementById("fields").innerHTML=this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.fields.map((({name:t})=>{let s=e[t]||"";return Array.isArray(s)&&(s=s.join(", ")),`<td>${s}</td>`})).join("")}</tr>`)).join("")}setData(e,t=!1){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n ${super.shadowTemplate}\n <div class="responsive-table">\n <table>\n <thead id="fields"></thead>\n <tbody id="records"></tbody>\n </table>\n </div>\n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n margin-bottom: var(--spacer);\n }\n `}static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>s.add(e)))})),[...s].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
|
package/package.json
CHANGED
package/src/components/Table.js
CHANGED
|
@@ -28,7 +28,13 @@ export default class Table extends Component {
|
|
|
28
28
|
}
|
|
29
29
|
renderRecords(){
|
|
30
30
|
this.shadowRoot.getElementById('records').innerHTML = this.records.map((record) => {
|
|
31
|
-
return `<tr>${this.fields.map(({name})
|
|
31
|
+
return `<tr>${this.fields.map(({name}) => {
|
|
32
|
+
let value = record[name] || '';
|
|
33
|
+
if (Array.isArray(value)) {
|
|
34
|
+
value = value.join(', ');
|
|
35
|
+
}
|
|
36
|
+
return `<td>${value}</td>`;
|
|
37
|
+
}).join('')}</tr>`;
|
|
32
38
|
}).join('');
|
|
33
39
|
}
|
|
34
40
|
|