kempo 2.15.2 → 3.0.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.
Files changed (60) hide show
  1. package/dist/components/Import.js +1 -1
  2. package/docs/components/_template.html +3 -1
  3. package/docs/components/accordion.html +3 -1
  4. package/docs/components/card.html +3 -1
  5. package/docs/components/component.html +3 -1
  6. package/docs/components/content-slider.html +3 -1
  7. package/docs/components/dialog.html +3 -1
  8. package/docs/components/directory-viewer.html +3 -1
  9. package/docs/components/focus-capture.html +3 -1
  10. package/docs/components/import.html +3 -1
  11. package/docs/components/lazy-component.html +3 -1
  12. package/docs/components/reactive-component.html +3 -1
  13. package/docs/components/reactive-lazy-component.html +3 -1
  14. package/docs/components/resize.html +3 -1
  15. package/docs/components/search.html +3 -1
  16. package/docs/components/show-more.html +3 -1
  17. package/docs/components/side-menu.html +3 -1
  18. package/docs/components/sortable.html +3 -1
  19. package/docs/components/split.html +3 -1
  20. package/docs/components/table.html +3 -1
  21. package/docs/components/tableControls.html +3 -1
  22. package/docs/components/tableCustomFields.html +3 -1
  23. package/docs/components/tableFetchRecords.html +3 -1
  24. package/docs/components/tableFieldSortHide.html +3 -1
  25. package/docs/components/tablePagination.html +3 -1
  26. package/docs/components/tableRecordEditing.html +3 -1
  27. package/docs/components/tableRecordFiltering.html +3 -1
  28. package/docs/components/tableRecordHiding.html +3 -1
  29. package/docs/components/tableRecordSearching.html +3 -1
  30. package/docs/components/tableRecordSelection.html +3 -1
  31. package/docs/components/tableRowControls.html +3 -1
  32. package/docs/components/tableSorting.html +3 -1
  33. package/docs/components/tabs.html +3 -1
  34. package/docs/components/tags.html +3 -1
  35. package/docs/components/theme-switcher.html +3 -1
  36. package/docs/components/timestamp.html +3 -1
  37. package/docs/components/toggle.html +3 -1
  38. package/docs/js/nav.inc.js +4 -0
  39. package/docs/kempo/components/Import.js +1 -1
  40. package/docs/nav.inc.html +1 -6
  41. package/docs/styles/_template.html +3 -1
  42. package/docs/styles/borders-spacing.html +3 -1
  43. package/docs/styles/buttons.html +3 -1
  44. package/docs/styles/colors.html +3 -1
  45. package/docs/styles/displays-layouts.html +3 -1
  46. package/docs/styles/embed-1.html +2 -0
  47. package/docs/styles/inputs.html +3 -1
  48. package/docs/styles/tables.html +3 -1
  49. package/docs/styles/typography.html +3 -1
  50. package/docs/utils/_template.html +3 -1
  51. package/docs/utils/cli.html +3 -1
  52. package/docs/utils/cookie.html +3 -1
  53. package/docs/utils/debounce.html +3 -1
  54. package/docs/utils/drag.html +3 -1
  55. package/docs/utils/element.html +3 -1
  56. package/docs/utils/format-timestamp.html +3 -1
  57. package/docs/utils/fuzzy-match.html +1 -1
  58. package/package.json +1 -1
  59. package/src/components/Import.js +27 -8
  60. package/docs/nav-1.inc.html +0 -84
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Tabs</h1>
19
21
  <main>
20
22
  <details class="b r mb">
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Tags</h1>
19
21
  <main>
20
22
  <details class="b r mb">
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">ThemeSwitcher</h1>
19
21
  <main>
20
22
  <details class="b r mb">
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Timestamp</h1>
19
21
  <main>
20
22
  <details class="b r mb">
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Toggle</h1>
19
21
  <main>
20
22
  <details class="b r mb">
@@ -0,0 +1,4 @@
1
+ document.getElementById('open-side-menu').addEventListener('click', async () => {
2
+ await window.customElements.whenDefined('k-side-menu');
3
+ document.getElementById('side-menu').open();
4
+ })
@@ -1 +1 @@
1
- import Component from"./Component.js";export default class Import extends Component{constructor(t=""){super(),this.registerAttribute("src",t)}attributeChangedCallback(t,e,r){"src"===t&&e!==r&&this.render(!0)}async render(t){const e=this.src;if(e&&await super.render(t)){let t=await(await fetch(e)).text();for(const[e,r]of Object.entries(Import.replacements))t=t.replace(new RegExp(`%%${e}%%`,"g"),r);return this.innerHTML=t,this.querySelectorAll("script").forEach((t=>{const e=document.createElement("script");t.getAttribute("type")&&(e.type=t.getAttribute("type")),t.getAttribute("src")&&(e.src=t.getAttribute("src")),t.textContent&&(e.textContent=t.textContent),t.parentElement.replaceChild(e,t)})),!0}return!1}get shadowStyles(){return"\n :host {\n display: contents;\n }\n "}static replacements={root:"./"};static addReplacement(t,e){this.replacements={...this.replacements,[t]:e}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);
1
+ import Component from"./Component.js";export default class Import extends Component{constructor(e=""){super(),this.registerAttribute("src",e)}attributeChangedCallback(e,t,r){"src"===e&&t!==r&&this.render(!0)}async render(e){const t=this.src;if(t&&await super.render(e)){let e=await(await fetch(t)).text();for(const[t,r]of Object.entries(Import.replacements))e=e.replace(new RegExp(`%%${t}%%`,"g"),r);const r=document.createElement("template");r.innerHTML=e;const n=Array.from(r.content.querySelectorAll("script[src]"));n.forEach((e=>e.remove())),this.innerHTML=r.innerHTML;for(const e of n){const t=document.createElement("script");Array.from(e.attributes).forEach((e=>{t.setAttribute(e.name,e.value)})),console.log("Adding script with src:",t.src),await new Promise(((e,r)=>{t.onload=e,t.onerror=r,this.appendChild(t)}))}return!0}return!1}get shadowStyles(){return"\n :host {\n display: contents;\n }\n "}static replacements={root:"./"};static addReplacement(e,t){this.replacements={...this.replacements,[e]:t}}static observedAttributes=[...super.observedAttributes,"src"]}window.customElements.define("k-import",Import);
package/docs/nav.inc.html CHANGED
@@ -66,12 +66,7 @@
66
66
  </div>
67
67
  </menu>
68
68
  </k-side-menu>
69
- <script>
70
- document.getElementById('open-side-menu').addEventListener('click', async () => {
71
- await window.customElements.whenDefined('k-side-menu');
72
- document.getElementById('side-menu').open();
73
- });
74
- </script>
69
+ <script src="%%root%%js/nav.inc.js" type="module"></script>
75
70
  <script src="%%root%%kempo/components/SideMenu.js" type="module"></script>
76
71
  <script src="%%root%%kempo/components/Icon.js" type="module"></script>
77
72
  <script src="%%root%%kempo/components/ThemeSwitcher.js" type="module"></script>
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Template</h1>
19
21
  <main>
20
22
 
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Borders and Spacing</h1>
19
21
  <main style="margin-bottom: 33vh">
20
22
  <h3>Borders</h3>
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Buttons</h1>
19
21
  <main>
20
22
  <h3>What is a button?</h3>
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Colors</h1>
19
21
  <main>
20
22
  <h3>Background</h3>
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Displays and Layouts</h1>
19
21
  <main style="margin-bottom: 33vh">
20
22
  <h3>Display</h3>
@@ -6,8 +6,10 @@
6
6
  <title>Template - Components - Kempo Docs - A Web Components Solution</title>
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <script type="module">
9
+ import Import from '../kempo/components/Import.js';
9
10
  import Icon from '../kempo/components/Icon.js';
10
11
  import Search from '../kempo/components/Search.js';
12
+ Import.addReplacement('root', '../');
11
13
  Icon.pathToIcons = ['../icons'];
12
14
  Search.searchDataUrl = '../search.json';
13
15
  </script>
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Inputs</h1>
19
21
  <main>
20
22
  <h3>Inputs</h3>
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Table</h1>
19
21
  <main>
20
22
  <div class="row -mx mb">
@@ -6,14 +6,16 @@
6
6
  <title>Typography - Kempo - A Web Components Solution</title>
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <script type="module">
9
+ import Import from '../kempo/components/Import.js';
9
10
  import Icon from '../kempo/components/Icon.js';
10
11
  import Search from '../kempo/components/Search.js';
12
+ Import.addReplacement('root', '../');
11
13
  Icon.pathToIcons = ['../icons'];
12
14
  Search.searchDataUrl = '../search.json';
13
15
  </script>
14
16
  </head>
15
17
  <body>
16
- <k-import src="../nav-1.inc.html"></k-import>
18
+ <k-import src="../nav.inc.html"></k-import>
17
19
  <h1 class="ta-center">Typography</h1>
18
20
  <main style="margin-bottom: 33vh">
19
21
  <h3>Paragraphs</h3>
@@ -7,14 +7,16 @@
7
7
  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
8
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
9
9
  <script type="module">
10
+ import Import from '../kempo/components/Import.js';
10
11
  import Icon from '../kempo/components/Icon.js';
11
12
  import Search from '../kempo/components/Search.js';
13
+ Import.addReplacement('root', '../');
12
14
  Icon.pathToIcons = ['../icons'];
13
15
  Search.searchDataUrl = '../search.json';
14
16
  </script>
15
17
  </head>
16
18
  <body>
17
- <k-import src="../nav-1.inc.html"></k-import>
19
+ <k-import src="../nav.inc.html"></k-import>
18
20
  <h1 class="ta-center">Template</h1>
19
21
  <main>
20
22
  <details
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">CLI</h1>
20
22
  <main>
21
23
  <details class="b r mb">
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">Cookie</h1>
20
22
  <main>
21
23
  <details class="b r mb">
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">Debounce</h1>
20
22
  <main>
21
23
  <details class="b r mb">
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">Drag</h1>
20
22
  <main>
21
23
  <details class="b r mb">
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">Element</h1>
20
22
  <main>
21
23
  <details class="b r mb">
@@ -8,14 +8,16 @@
8
8
  <link rel="stylesheet" href="../kempo/kempo-styles.css" />
9
9
  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
10
10
  <script type="module">
11
+ import Import from '../kempo/components/Import.js';
11
12
  import Icon from '../kempo/components/Icon.js';
12
13
  import Search from '../kempo/components/Search.js';
14
+ Import.addReplacement('root', '../');
13
15
  Icon.pathToIcons = ['../icons'];
14
16
  Search.searchDataUrl = '../search.json';
15
17
  </script>
16
18
  </head>
17
19
  <body>
18
- <k-import src="../nav-1.inc.html"></k-import>
20
+ <k-import src="../nav.inc.html"></k-import>
19
21
  <h1 class="ta-center">formatTimestamp</h1>
20
22
  <main>
21
23
  <details class="b r mb">
@@ -13,7 +13,7 @@
13
13
  </script>
14
14
  </head>
15
15
  <body>
16
- <k-import src="../nav-1.inc.html"></k-import>
16
+ <k-import src="../nav.inc.html"></k-import>
17
17
  <h1 class="ta-center">Fuzzy Match Utility Documentation</h1>
18
18
  <main>
19
19
  <details class="b r mb">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo",
3
- "version": "2.15.2",
3
+ "version": "3.0.0",
4
4
  "type": "module",
5
5
  "description": "A web component library",
6
6
  "exports": {
@@ -13,18 +13,37 @@ export default class Import extends Component {
13
13
  async render(force){
14
14
  const src = this.src;
15
15
  if(src && await super.render(force)){
16
+ // Get raw text and process replacements first
16
17
  let contents = await (await fetch(src)).text();
17
18
  for (const [name, value] of Object.entries(Import.replacements)) {
18
19
  contents = contents.replace(new RegExp(`%%${name}%%`, 'g'), value);
19
20
  }
20
- this.innerHTML = contents;
21
- this.querySelectorAll('script').forEach( $badScript => {
22
- const $goodScript = document.createElement('script');
23
- if($badScript.getAttribute('type')) $goodScript.type = $badScript.getAttribute('type');
24
- if($badScript.getAttribute('src')) $goodScript.src = $badScript.getAttribute('src');
25
- if($badScript.textContent) $goodScript.textContent = $badScript.textContent;
26
- $badScript.parentElement.replaceChild($goodScript, $badScript);
27
- });
21
+
22
+ // Now parse into template
23
+ const temp = document.createElement('template');
24
+ temp.innerHTML = contents;
25
+
26
+ // Extract and handle scripts
27
+ const scripts = Array.from(temp.content.querySelectorAll('script[src]'));
28
+ scripts.forEach(script => script.remove());
29
+
30
+ // Set content
31
+ this.innerHTML = temp.innerHTML;
32
+
33
+ // Add scripts back
34
+ for (const script of scripts) {
35
+ const newScript = document.createElement('script');
36
+ Array.from(script.attributes).forEach(attr => {
37
+ newScript.setAttribute(attr.name, attr.value);
38
+ });
39
+ console.log('Adding script with src:', newScript.src); // Debug
40
+ await new Promise((resolve, reject) => {
41
+ newScript.onload = resolve;
42
+ newScript.onerror = reject;
43
+ this.appendChild(newScript);
44
+ });
45
+ }
46
+
28
47
  return true;
29
48
  }
30
49
  return false;
@@ -1,84 +0,0 @@
1
- <nav
2
- class="d-f bg-primary fixed"
3
- >
4
- <button
5
- id="open-side-menu"
6
- class="link"
7
- >
8
- <k-icon name="menu"></k-icon>
9
- </button>
10
- <a href="../">Home</a>
11
- <k-search
12
- class="flex mr"
13
- style="min-width:10rem;max-width:24rem"
14
- ></k-search>
15
- <div class="flex"></div>
16
- <k-theme-switcher></k-theme-switcher>
17
- </nav>
18
- <div style="width: 100%; height: 4rem;"></div>
19
- <k-side-menu
20
- id="side-menu"
21
- >
22
- <h1>Kempo Docs</h1>
23
- <menu>
24
- <a href="../" class="h5 pl0 mb">Home</a>
25
- <h5 class="mb0">Styles</h5>
26
- <div class="pl mb">
27
- <a href="../styles/typography.html">Typography</a>
28
- <a href="../styles/displays-layouts.html">Displays and Layouts</a>
29
- <a href="../styles/borders-spacing.html">Borders and Spacing</a>
30
- <a href="../styles/inputs.html">Inputs</a>
31
- <a href="../styles/buttons.html">Buttons</a>
32
- <a href="../styles/tables.html">Tables</a>
33
- <a href="../styles/colors.html">Colors</a>
34
- </div>
35
- <h5 class="mb0">Components</h5>
36
- <div class="pl mb">
37
- <a href="../components/component.html">Component</a>
38
- <a href="../components/lazy-component.html">LazyComponent</a>
39
- <a href="../components/reactivecomponent.html">ReactiveComponent</a>
40
- <a href="../components/reactivelazy-component.html">ReactiveLazyComponent</a>
41
- <a href="../components/focuscapture.html">FocusCapture</a>
42
- <hr />
43
- <a href="../components/accordion.html">Accordion</a>
44
- <a href="../components/card.html">Card</a>
45
- <a href="../components/content-slider.html">Content Slider</a>
46
- <a href="../components/dialog.html">Dialog</a>
47
- <a href="../components/directory-viewer.html">Directory Viewer</a>
48
- <a href="../components/icon.html">Icon</a>
49
- <a href="../components/import.html">Import</a>
50
- <a href="../components/resize.html">Resize</a>
51
- <a href="../components/search.html">Search</a>
52
- <a href="../components/show-more.html">Show More</a>
53
- <a href="../components/side-menu.html">Side Menu</a>
54
- <a href="../components/split.html">Split</a>
55
- <a href="../components/table.html">Table</a>
56
- <a href="../components/tabs.html">Tabs</a>
57
- <a href="../components/tags.html">Tags</a>
58
- <a href="../components/theme-switcher.html">Theme Switcher</a>
59
- <a href="../components/timestamp.html">Timestamp</a>
60
- <a href="../components/toggle.html">Toggle</a>
61
- </div>
62
-
63
- <h5 class="mb0">Utils</h5>
64
- <div class="pl mb">
65
- <a href="../utils/cli.html">CLI</a>
66
- <a href="../utils/cookie.html">Cookie</a>
67
- <a href="../utils/debounce.html">Debounce</a>
68
- <a href="../utils/drag.html">Drag</a>
69
- <a href="../utils/element.html">Element</a>
70
- <a href="../utils/format-timestamp.html">Format Timestamp</a>
71
- <a href="../utils/fuzzy-match.html">Fuzzy Match</a>
72
- </div>
73
- </menu>
74
- </k-side-menu>
75
- <script>
76
- document.getElementById('open-side-menu').addEventListener('click', async () => {
77
- await window.customElements.whenDefined('k-side-menu');
78
- document.getElementById('side-menu').open();
79
- });
80
- </script>
81
- <script src="../kempo/components/SideMenu.js" type="module"></script>
82
- <script src="../kempo/components/Icon.js" type="module"></script>
83
- <script src="../kempo/components/ThemeSwitcher.js" type="module"></script>
84
- <script src="../kempo/components/Search.js" type="module"></script>