kempo 2.10.1 → 2.10.2

package/dist/components/Search.js

@@ -1 +1 @@
-import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{static searchDataUrl="/search.json";constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch(Search.searchDataUrl)).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n      <div id="wrapper">\n        <input\n          id="input"\n          placeholder="Search"\n          type="search"\n        />\n        <div id="results"></div>\n      </div>\n    '}get shadowStyles(){return'\n      :host {\n        display: inline-block;\n        align-self: center;\n      }\n      #wrapper {\n        position: relative;\n      }\n      #input {\n        width: 100%;\n        margin: 0;\n      }\n      #results {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        max-height: 20rem;\n        background-color: var(--c_bg);\n        color: var(--tc);\n        box-shadow: var(--drop_shadow);\n      }\n      :host([opened="true"]) #results {\n        display: block;\n      }\n      #results a {\n        display: block;\n        padding: var(--spacer_h);\n        text-decoration: none;\n        border-bottom: 1px solid var(--c_border);\n        border-radius: 0;\n      }\n      #results a:last-child {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-search",Search);
+import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{static searchDataUrl="/search.json";constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch(Search.searchDataUrl)).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n      <div id="wrapper">\n        <input\n          id="input"\n          placeholder="Search"\n          type="search"\n        />\n        <div id="results"></div>\n      </div>\n    '}get shadowStyles(){return'\n      :host {\n        display: inline-block;\n        align-self: center;\n      }\n      #wrapper {\n        position: relative;\n      }\n      #input {\n        width: 100%;\n        margin: 0;\n      }\n      #results {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        max-height: 20rem;\n        background-color: var(--c_bg);\n        color: var(--tc);\n        box-shadow: var(--drop_shadow);\n      }\n      :host([opened="true"]) #results {\n        display: block;\n      }\n      #results a {\n        display: block;\n        padding: var(--spacer_h);\n        text-decoration: none;\n        border-bottom: 1px solid var(--c_border);\n        border-radius: 0;\n        color: var(--tc_primary);\n      }\n      #results a:last-child {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-search",Search);

package/docs/components/tableCustomFields.html

@@ -68,7 +68,8 @@
         fields: [
           {
             name: "name",
-            label: "Name"
+            label: "Name",
+            size: 300
           },
           {
             name: 'phoneNumber',

package/docs/kempo/components/Search.js

@@ -1 +1 @@
-import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{static searchDataUrl="/search.json";constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch(Search.searchDataUrl)).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n      <div id="wrapper">\n        <input\n          id="input"\n          placeholder="Search"\n          type="search"\n        />\n        <div id="results"></div>\n      </div>\n    '}get shadowStyles(){return'\n      :host {\n        display: inline-block;\n        align-self: center;\n      }\n      #wrapper {\n        position: relative;\n      }\n      #input {\n        width: 100%;\n        margin: 0;\n      }\n      #results {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        max-height: 20rem;\n        background-color: var(--c_bg);\n        color: var(--tc);\n        box-shadow: var(--drop_shadow);\n      }\n      :host([opened="true"]) #results {\n        display: block;\n      }\n      #results a {\n        display: block;\n        padding: var(--spacer_h);\n        text-decoration: none;\n        border-bottom: 1px solid var(--c_border);\n        border-radius: 0;\n      }\n      #results a:last-child {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-search",Search);
+import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{static searchDataUrl="/search.json";constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch(Search.searchDataUrl)).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n      <div id="wrapper">\n        <input\n          id="input"\n          placeholder="Search"\n          type="search"\n        />\n        <div id="results"></div>\n      </div>\n    '}get shadowStyles(){return'\n      :host {\n        display: inline-block;\n        align-self: center;\n      }\n      #wrapper {\n        position: relative;\n      }\n      #input {\n        width: 100%;\n        margin: 0;\n      }\n      #results {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        max-height: 20rem;\n        background-color: var(--c_bg);\n        color: var(--tc);\n        box-shadow: var(--drop_shadow);\n      }\n      :host([opened="true"]) #results {\n        display: block;\n      }\n      #results a {\n        display: block;\n        padding: var(--spacer_h);\n        text-decoration: none;\n        border-bottom: 1px solid var(--c_border);\n        border-radius: 0;\n        color: var(--tc_primary);\n      }\n      #results a:last-child {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-search",Search);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/Search.js

@@ -129,6 +129,7 @@ export default class Search extends Component {
         text-decoration: none;
         border-bottom: 1px solid var(--c_border);
         border-radius: 0;
+        color: var(--tc_primary);
       }
       #results a:last-child {
         border-bottom: 0;

package/src/components/Table.js

@@ -727,23 +727,24 @@ export default class Table extends Component {
     
     this.fields.forEach(field => {
       if (field.size) {
-      this.columnSizes[field.name] = field.size;
+        this.columnSizes[field.name] = field.size;
+        this.columnSizes.total += field.size;
       } else {
-      let maxLength = 0;
-      this.records.slice(0, 100).forEach(record => {
-        let value = record[field.name];
-        if (field.calculator) {
-          value = field.calculator(record, this);
-        }
-        if (field.formatter) {
-          value = field.formatter(value);
-        }
-        if (value && value.toString().length > maxLength) {
-        maxLength = value.toString().length;
-        }
-      });
-      this.columnSizes[field.name] = Math.max((maxLength * 10 + 32), 128);
-      if(!field.hidden) this.columnSizes.total += this.columnSizes[field.name];
+        let maxLength = 0;
+        this.records.slice(0, 100).forEach(record => {
+          let value = record[field.name];
+          if (field.calculator) {
+            value = field.calculator(record, this);
+          }
+          if (field.formatter) {
+            value = field.formatter(value);
+          }
+          if (value && value.toString().length > maxLength) {
+          maxLength = value.toString().length;
+          }
+        });
+        this.columnSizes[field.name] = Math.max((maxLength * 10 + 32), 128);
+        if(!field.hidden) this.columnSizes.total += this.columnSizes[field.name];
       }
     });
     return this.columnSizes;