kempo 1.3.0 → 1.4.0

package/dist/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await fetch(`${Icon.pathToIcons}/${this.name}.svg`);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons="/icons";static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const getIconByName=t=>{const e=async e=>{try{const n=await fetch(`${e}/${t}.svg`);if(200===n.status)return await n.text()}catch(t){console.log(t)}return!1};return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);

package/docs/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>

package/docs/index.html

@@ -8,6 +8,9 @@
 </head>
 <body>
   <k-import src="./nav.inc.html"></k-import>
+  <main>
+    
+  </main>
   <script type="module" src="./kempo/components/Import.js"></script>
 </body>
 </html>

package/docs/kempo/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await fetch(`${Icon.pathToIcons}/${this.name}.svg`);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){["src","name"].includes(t)&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons="/icons";static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const getIconByName=t=>{const e=async e=>{try{const n=await fetch(`${e}/${t}.svg`);if(200===n.status)return await n.text()}catch(t){console.log(t)}return!1};return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(){super(),this.registerAttributes({src:"",name:""})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await fetch(this.src);200===t.status?(this.innerHTML=await t.text(),this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);

package/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>

package/package.json

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

package/src/components/Icon.js

@@ -1,5 +1,29 @@
 import Component from './Component.js';
 
+const getIconByName = (name) => {
+  const tryDir = async (dir) => {
+    try {
+      const response = await fetch(`${dir}/${name}.svg`);
+      if(response.status === 200) return await (response).text();
+    } catch(e){
+      console.log(e);
+    }
+    return false;
+  }
+
+  return new Promise( async (resolve, reject) => {
+    let svg;
+    for(let i=0; i < Icon.pathToIcons.length && !svg; i++){
+      svg = await tryDir(Icon.pathToIcons[i]);
+    }
+    if(svg){
+      resolve(svg);
+    } else {
+      reject('Icon not found');
+    }
+  });
+}
+
 export default class Icon extends Component {
   constructor(){
     super();
@@ -8,6 +32,11 @@ export default class Icon extends Component {
       name: ''
     });
   }
+  connectedCallback(){
+    // super.connectedCallback();
+    // do not call super.connectedCallback because it will attempt to render and then again on attribute change
+    // so we are overwriting the parent method and not calling it
+  }
   async render(force){
     if(await super.render(force)){
       if(this.src){
@@ -17,9 +46,9 @@ export default class Icon extends Component {
           this.fixSVG();
         } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
       } else if(this.name){
-        const response = await fetch(`${Icon.pathToIcons}/${this.name}.svg`);
-        if(response.status === 200){
-          this.innerHTML = await (response).text();
+        const svg = await getIconByName(this.name);
+        if(svg){
+          this.innerHTML = svg;
           this.fixSVG();
         } else if(!this.innerHTML.length) this.innerHTML = Icon.fallback;
       } else {
@@ -31,7 +60,8 @@ export default class Icon extends Component {
     return false;
   }
   attributeChangedCallback(n, oV, nV){
-    if(['src', 'name'].includes(n)){
+    super.attributeChangedCallback(n, oV, nV);
+    if(['src', 'name'].includes(n) && nV){
       this.render(true);
     }
   }
@@ -61,7 +91,9 @@ export default class Icon extends Component {
     'src'
   ];
 
-  static pathToIcons = '/icons';
+  static pathToIcons = [
+    '/icons'
+  ];
   static fallback = /*html*/`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>
   `;