kempo 2.6.3 → 2.7.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 Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,r={before:[],after:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[]}}),e&&this.setData(e,t,r)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){const e=this.controls.before?.length?"<th></th>":"",t=this.controls.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.renderControls(this.controls.before,e)}${this.fields.map((({name:t})=>{let r=e[t]||"";return Array.isArray(r)&&(r=r.join(", ")),`<td>${r}</td>`})).join("")}${this.renderControls(this.controls.after,e)}</tr>`)).join("")}renderControls(e=[],t){return 0===e.length?"":`<td>${e.map((({
|
|
1
|
+
import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,r={before:[],after:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[]}}),e&&this.setData(e,t,r)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){const e=this.controls.before?.length?"<th></th>":"",t=this.controls.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.renderControls(this.controls.before,e)}${this.fields.map((({name:t})=>{let r=e[t]||"";return Array.isArray(r)&&(r=r.join(", ")),`<td>${r}</td>`})).join("")}${this.renderControls(this.controls.after,e)}</tr>`)).join("")}renderControls(e=[],t){return 0===e.length?"":`<td>${e.map((({html:e,icon:r,action:s})=>{if(e)return e;if(render&&"function"==typeof render)return render(t,this);{const e=document.createElement("button");e.appendChild(new Icon(r)),s&&e.addEventListener("click",(()=>s(t,this)))}return button.outerHTML})).join("")}</td>`}setData(e,t=!1,r={before:[],after:[]}){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.controls=r,this.renderFields(),this.renderRecords(),this.renderControls()}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 r=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>r.add(e)))})),[...r].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
|
|
@@ -22,16 +22,14 @@
|
|
|
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 />
|
|
26
|
-
<a href="#controls">Row Controls</a><br />
|
|
27
25
|
</div>
|
|
28
26
|
</details>
|
|
29
27
|
|
|
30
28
|
<h3>Description</h3>
|
|
31
|
-
<p>The <code><k-table
|
|
29
|
+
<p>The <code><k-table></code> component is used to render data into a <code><table></code> using JavaScript.</p>
|
|
32
30
|
|
|
33
31
|
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
34
|
-
<p>In HTML create a <code><k-table
|
|
32
|
+
<p>In HTML create a <code><k-table></code>, and then in JavaScript call the <code>setData</code> method passing in an array of objects containing your data.</p>
|
|
35
33
|
|
|
36
34
|
<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">"contacts"</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">'contacts'</span>).setData([<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Dustin"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(111) 111-1111"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"dustin@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Male"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Kayla"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(222) 222-2222"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"kayla@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Female"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Alexander"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(333) 333-33333"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"alex@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Male"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Amelia"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(444) 444-44444"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"amelia@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Female"</span><br /> },<br /> ]);<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
37
35
|
<script type="module" src="../kempo/components/Table.js"></script>
|
|
@@ -61,7 +59,7 @@
|
|
|
61
59
|
phoneNumber: "(444) 444-44444",
|
|
62
60
|
emailAddress: "amelia@mailserver.com",
|
|
63
61
|
gender: "Female"
|
|
64
|
-
}
|
|
62
|
+
},
|
|
65
63
|
]);
|
|
66
64
|
</script>
|
|
67
65
|
|
|
@@ -109,90 +107,20 @@
|
|
|
109
107
|
]);
|
|
110
108
|
</script>
|
|
111
109
|
|
|
112
|
-
<h3 id="
|
|
113
|
-
<p>The table component can display arrays of strings or numbers by joining them with a comma and a space.</p>
|
|
114
|
-
<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>
|
|
115
|
-
<k-table id="hobbies"></k-table>
|
|
116
|
-
<script type="module">
|
|
117
|
-
document.getElementById('hobbies').setData([
|
|
118
|
-
{
|
|
119
|
-
name: "Dustin",
|
|
120
|
-
hobbies: ["Reading", "Hiking", "Gaming"]
|
|
121
|
-
},
|
|
122
|
-
{
|
|
123
|
-
name: "Kayla",
|
|
124
|
-
hobbies: ["Cooking", "Traveling"]
|
|
125
|
-
}
|
|
126
|
-
]);
|
|
127
|
-
</script>
|
|
128
|
-
|
|
129
|
-
<h3 id="controls"><a href="#controls" class="no-link">Row Controls</a></h3>
|
|
130
|
-
<p>The table component can display controls before or after each row. Each control is defined by an icon name and a callback function. All controls are combined into a single <code><td></code> with each control being a button.</p>
|
|
131
|
-
<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">"contacts"</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">'contacts'</span>).setData([<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Dustin"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(111) 111-1111"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"dustin@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Male"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"Kayla"</span>,<br /> <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(222) 222-2222"</span>,<br /> <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"kayla@mailserver.com"</span>,<br /> <span class="hljs-attr">gender</span>: <span class="hljs-string">"Female"</span><br /> }<br /> ], false, {<br /> before: [<br /> {<br /> icon: 'edit',<br /> action: (record, table) => console.log('Edit', record, table)<br /> }<br /> ],<br /> after: [<br /> {<br /> icon: 'delete',<br /> action: (record, table) => console.log('Delete', record, table)<br /> }<br /> ]<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
132
|
-
<k-table id="contacts2"></k-table>
|
|
133
|
-
<script type="module">
|
|
134
|
-
document.getElementById('contacts2').setData([
|
|
135
|
-
{
|
|
136
|
-
name: "Dustin",
|
|
137
|
-
phoneNumber: "(111) 111-1111",
|
|
138
|
-
emailAddress: "dustin@mailserver.com",
|
|
139
|
-
gender: "Male"
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
name: "Kayla",
|
|
143
|
-
phoneNumber: "(222) 222-2222",
|
|
144
|
-
emailAddress: "kayla@mailserver.com",
|
|
145
|
-
gender: "Female"
|
|
146
|
-
}
|
|
147
|
-
], false, {
|
|
148
|
-
before: [
|
|
149
|
-
{
|
|
150
|
-
icon: 'edit',
|
|
151
|
-
action: (record, table) => console.log('Edit', record, table)
|
|
152
|
-
}
|
|
153
|
-
],
|
|
154
|
-
after: [
|
|
155
|
-
{
|
|
156
|
-
icon: 'delete',
|
|
157
|
-
action: (record, table) => console.log('Delete', record, table)
|
|
158
|
-
}
|
|
159
|
-
]
|
|
160
|
-
});
|
|
161
|
-
</script>
|
|
162
|
-
|
|
163
|
-
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
110
|
+
<h3 id="constructor"><a href="#consttructor" class="no-link">Constructor</a></h3>
|
|
164
111
|
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
165
112
|
<h5>
|
|
166
113
|
<code>new Table()</code><br />
|
|
167
114
|
<code>new Table(<i><Array>object</i> records)</code><br />
|
|
168
|
-
<code>new Table(<i><Array>object</i> records, <i><Array>object</i> fields)</code
|
|
169
|
-
<code>new Table(<i><Array>object</i> records, <i><Array>object</i> fields, <i>object</i> controls)</code>
|
|
115
|
+
<code>new Table(<i><Array>object</i> records, <i><Array>object</i> fields)</code>
|
|
170
116
|
</h5>
|
|
171
117
|
|
|
172
|
-
<h4>
|
|
118
|
+
<h4>Paramters</h4>
|
|
173
119
|
<h5><code><i><Array>object</i> records</code></h5>
|
|
174
120
|
<p>An array of objects that represent the records to be shown in the table.</p>
|
|
175
121
|
|
|
176
122
|
<h5><code><i><Array>object</i> fields</code></h5>
|
|
177
|
-
<p>An array of objects that represents the
|
|
178
|
-
|
|
179
|
-
<h5><code><i>object</i> controls</code></h5>
|
|
180
|
-
<p>An object containing optional arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name and a callback function. The <code>controls</code> object can contain the optional <code>before</code> and <code>after</code> properties, which are arrays of objects containing the <code>icon</code> (string) and <code>action</code> (function).</p>
|
|
181
|
-
<p>Example:</p>
|
|
182
|
-
<pre><code class="hljs javascript">{
|
|
183
|
-
before: [
|
|
184
|
-
{
|
|
185
|
-
icon: 'edit',
|
|
186
|
-
action: (record, table) => console.log('Edit', record, table)
|
|
187
|
-
}
|
|
188
|
-
],
|
|
189
|
-
after: [
|
|
190
|
-
{
|
|
191
|
-
icon: 'delete',
|
|
192
|
-
action: (record, table) => console.log('Delete', record, table)
|
|
193
|
-
}
|
|
194
|
-
]
|
|
195
|
-
}</code></pre>
|
|
123
|
+
<p>An array of objects that represents the feilds of the table, each object must contain a <code>name</code> and a <code>label</code>. If this parameter is ommitted the fields will be automatically generated from the first 100 records.</p>
|
|
196
124
|
|
|
197
125
|
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
198
126
|
<ul>
|
|
@@ -206,8 +134,8 @@
|
|
|
206
134
|
<h5><code>records<i>: <Array>object</i></code></h5>
|
|
207
135
|
<p>An array of objects containing the data that will be the records of the table, where the object keys match the field names.</p>
|
|
208
136
|
|
|
209
|
-
<h5><code>
|
|
210
|
-
<p>An object containing arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name and a
|
|
137
|
+
<h5><code><i>object</i> controls</code></h5>
|
|
138
|
+
<p>An object containing optional arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. The <code>controls</code> object can contain the optional <code>before</code> and <code>after</code> properties, which are arrays of objects containing the <code>icon</code> (string), <code>action</code> (function), <code>html</code> (string), and <code>render</code> (function). If <code>html</code> is present, it overrides the icon and is rendered in its place. If <code>render</code> is present, it is used to render the control.</p>
|
|
211
139
|
<p>Example:</p>
|
|
212
140
|
<pre><code class="hljs javascript">{
|
|
213
141
|
before: [
|
|
@@ -220,6 +148,13 @@
|
|
|
220
148
|
{
|
|
221
149
|
icon: 'delete',
|
|
222
150
|
action: (record, table) => console.log('Delete', record, table)
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
html: '<span>Custom HTML</span>',
|
|
154
|
+
action: (record, table) => console.log('Custom Action', record, table)
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
render: (record, table) => `<button onclick="console.log('Rendered Action', ${record}, ${table})">Rendered Button</button>`
|
|
223
158
|
}
|
|
224
159
|
]
|
|
225
160
|
}</code></pre>
|
|
@@ -233,10 +168,7 @@
|
|
|
233
168
|
<p>Renders the fields as table headers, this is called automatically by setData, you should never have to call it.</p>
|
|
234
169
|
|
|
235
170
|
<h5><code>renderRecords()<i>: undefined</i></code></h5>
|
|
236
|
-
<p>Renders the records as table
|
|
237
|
-
|
|
238
|
-
<h5><code>renderControls(<i><Array>object</i> controls, <i>object</i> record)<i>: string</i></code></h5>
|
|
239
|
-
<p>Renders the controls as table cells. Each control is defined by an icon name and a callback function. This is called automatically by renderRecords, you should never have to call it.</p>
|
|
171
|
+
<p>Renders the records as table row, this is called automatically by setData, you should never have to call it.</p>
|
|
240
172
|
|
|
241
173
|
</main>
|
|
242
174
|
<div style="height: 33.333vh"></div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,r={before:[],after:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[]}}),e&&this.setData(e,t,r)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){const e=this.controls.before?.length?"<th></th>":"",t=this.controls.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.renderControls(this.controls.before,e)}${this.fields.map((({name:t})=>{let r=e[t]||"";return Array.isArray(r)&&(r=r.join(", ")),`<td>${r}</td>`})).join("")}${this.renderControls(this.controls.after,e)}</tr>`)).join("")}renderControls(e=[],t){return 0===e.length?"":`<td>${e.map((({
|
|
1
|
+
import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";export default class Table extends Component{constructor(e=!1,t=!1,r={before:[],after:[]}){super(),this.registerProps({fields:[],records:[],controls:{before:[],after:[]}}),e&&this.setData(e,t,r)}async render(e){return!!await super.render(e)&&(this.renderFields(),this.renderRecords(),!0)}renderFields(){const e=this.controls.before?.length?"<th></th>":"",t=this.controls.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){this.shadowRoot.getElementById("records").innerHTML=this.records.map((e=>`<tr>${this.renderControls(this.controls.before,e)}${this.fields.map((({name:t})=>{let r=e[t]||"";return Array.isArray(r)&&(r=r.join(", ")),`<td>${r}</td>`})).join("")}${this.renderControls(this.controls.after,e)}</tr>`)).join("")}renderControls(e=[],t){return 0===e.length?"":`<td>${e.map((({html:e,icon:r,action:s})=>{if(e)return e;if(render&&"function"==typeof render)return render(t,this);{const e=document.createElement("button");e.appendChild(new Icon(r)),s&&e.addEventListener("click",(()=>s(t,this)))}return button.outerHTML})).join("")}</td>`}setData(e,t=!1,r={before:[],after:[]}){this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),this.controls=r,this.renderFields(),this.renderRecords(),this.renderControls()}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 r=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>r.add(e)))})),[...r].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
|
package/package.json
CHANGED
package/src/components/Table.js
CHANGED
|
@@ -44,11 +44,18 @@ export default class Table extends Component {
|
|
|
44
44
|
|
|
45
45
|
renderControls(controls = [], record) {
|
|
46
46
|
if (controls.length === 0) return '';
|
|
47
|
-
return `<td>${controls.map(({ icon, action }) => {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
47
|
+
return `<td>${controls.map(({ html, icon, action }) => {
|
|
48
|
+
if(html){
|
|
49
|
+
return html;
|
|
50
|
+
} else if(render && typeof(render) === 'function'){
|
|
51
|
+
return render(record, this);
|
|
52
|
+
} else {
|
|
53
|
+
const $button = document.createElement('button');
|
|
54
|
+
$button.appendChild(new Icon(icon));
|
|
55
|
+
if (action) {
|
|
56
|
+
$button.addEventListener('click', () => action(record, this));
|
|
57
|
+
}
|
|
58
|
+
}
|
|
52
59
|
return button.outerHTML;
|
|
53
60
|
}).join('')}</td>`;
|
|
54
61
|
}
|
|
@@ -59,6 +66,7 @@ export default class Table extends Component {
|
|
|
59
66
|
this.controls = controls;
|
|
60
67
|
this.renderFields();
|
|
61
68
|
this.renderRecords();
|
|
69
|
+
this.renderControls();
|
|
62
70
|
}
|
|
63
71
|
|
|
64
72
|
get shadowTemplate(){
|