kempo 1.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 (194) hide show
  1. package/.gitattributes +2 -0
  2. package/LICENSE +21 -0
  3. package/README.md +2 -0
  4. package/dist/components/Card.js +1 -0
  5. package/dist/components/CodeEditor.js +1 -0
  6. package/dist/components/Component.js +1 -0
  7. package/dist/components/Dialog.js +1 -0
  8. package/dist/components/FocusCapture.js +1 -0
  9. package/dist/components/Icon.js +1 -0
  10. package/dist/components/Import.js +1 -0
  11. package/dist/components/LazyComponent.js +1 -0
  12. package/dist/components/ReactiveComponent.js +1 -0
  13. package/dist/components/ReactiveLazyComponent.js +1 -0
  14. package/dist/components/Resize.js +1 -0
  15. package/dist/components/Search.js +1 -0
  16. package/dist/components/ShowMore.js +1 -0
  17. package/dist/components/SideMenu.js +1 -0
  18. package/dist/components/Split.js +1 -0
  19. package/dist/components/Tabs.js +1 -0
  20. package/dist/components/ThemeSwitcher.js +1 -0
  21. package/dist/components/Timestamp.js +1 -0
  22. package/dist/components/WebSnippetEditor.js +1 -0
  23. package/dist/index.js +1 -0
  24. package/dist/kempo-hljs.css +1 -0
  25. package/dist/kempo-styles.css +1 -0
  26. package/dist/kempo-vars.css +1 -0
  27. package/dist/kempo.css +1 -0
  28. package/dist/kempo.js +1 -0
  29. package/dist/utils/cli.js +1 -0
  30. package/dist/utils/cookie.js +1 -0
  31. package/dist/utils/debounce.js +1 -0
  32. package/dist/utils/drag.js +1 -0
  33. package/dist/utils/element.js +1 -0
  34. package/dist/utils/formatTimestamp.js +1 -0
  35. package/dist/utils/fuzzyMatch.js +1 -0
  36. package/dist/utils/getPreferredTheme.js +1 -0
  37. package/dist/utils/loadCss.js +1 -0
  38. package/dist/utils/loadScript.js +1 -0
  39. package/dist/utils/object.js +1 -0
  40. package/dist/utils/string.js +1 -0
  41. package/dist/utils/toFunction.js +1 -0
  42. package/dist/utils/type.js +1 -0
  43. package/dist/utils/waitFrames.js +1 -0
  44. package/docs/components/_template.html +22 -0
  45. package/docs/components/card.html +35 -0
  46. package/docs/components/codeeditor.html +29 -0
  47. package/docs/components/component.html +88 -0
  48. package/docs/components/dialog.html +89 -0
  49. package/docs/components/icon.html +73 -0
  50. package/docs/components/import.html +34 -0
  51. package/docs/components/lazycomponent.html +50 -0
  52. package/docs/components/resize.html +107 -0
  53. package/docs/components/show-more.html +92 -0
  54. package/docs/components/sidemenu.html +97 -0
  55. package/docs/components/split.html +70 -0
  56. package/docs/components/tabs.html +33 -0
  57. package/docs/components/websnippeteditor.html +42 -0
  58. package/docs/index.html +17 -0
  59. package/docs/kempo/components/Card.js +1 -0
  60. package/docs/kempo/components/CodeEditor.js +1 -0
  61. package/docs/kempo/components/Collapse.js +1 -0
  62. package/docs/kempo/components/Component.js +1 -0
  63. package/docs/kempo/components/Dialog.js +1 -0
  64. package/docs/kempo/components/FocusCapture.js +1 -0
  65. package/docs/kempo/components/Icon.js +1 -0
  66. package/docs/kempo/components/Import.js +1 -0
  67. package/docs/kempo/components/LazyComponent.js +1 -0
  68. package/docs/kempo/components/ReactiveComponent.js +1 -0
  69. package/docs/kempo/components/ReactiveLazyComponent.js +1 -0
  70. package/docs/kempo/components/Resize.js +1 -0
  71. package/docs/kempo/components/Search.js +1 -0
  72. package/docs/kempo/components/ShowMore.js +1 -0
  73. package/docs/kempo/components/SideMenu.js +1 -0
  74. package/docs/kempo/components/Split.js +1 -0
  75. package/docs/kempo/components/Tabs.js +1 -0
  76. package/docs/kempo/components/ThemeSwitcher.js +1 -0
  77. package/docs/kempo/components/Timestamp.js +1 -0
  78. package/docs/kempo/components/WebSnippetEditor.js +1 -0
  79. package/docs/kempo/icons/arrow-down-double.svg +1 -0
  80. package/docs/kempo/icons/arrow-up-double.svg +1 -0
  81. package/docs/kempo/icons/close.svg +2 -0
  82. package/docs/kempo/icons/compare.svg +1 -0
  83. package/docs/kempo/icons/dark-mode.svg +1 -0
  84. package/docs/kempo/icons/delete.svg +1 -0
  85. package/docs/kempo/icons/filter-off.svg +1 -0
  86. package/docs/kempo/icons/filter.svg +1 -0
  87. package/docs/kempo/icons/light-mode.svg +1 -0
  88. package/docs/kempo/icons/menu.svg +1 -0
  89. package/docs/kempo/icons/pause.svg +1 -0
  90. package/docs/kempo/icons/play.svg +1 -0
  91. package/docs/kempo/icons/search.svg +1 -0
  92. package/docs/kempo/icons/settings.svg +1 -0
  93. package/docs/kempo/icons/storage.svg +1 -0
  94. package/docs/kempo/icons/trash-x.svg +1 -0
  95. package/docs/kempo/index.js +1 -0
  96. package/docs/kempo/kempo-hljs.css +1 -0
  97. package/docs/kempo/kempo-styles.css +1 -0
  98. package/docs/kempo/kempo-vars.css +1 -0
  99. package/docs/kempo/kempo.css +1 -0
  100. package/docs/kempo/kempo.js +1 -0
  101. package/docs/kempo/utils/cli.js +1 -0
  102. package/docs/kempo/utils/cookie.js +1 -0
  103. package/docs/kempo/utils/debounce.js +1 -0
  104. package/docs/kempo/utils/drag.js +1 -0
  105. package/docs/kempo/utils/element.js +1 -0
  106. package/docs/kempo/utils/formatTimestamp.js +1 -0
  107. package/docs/kempo/utils/fuzzyMatch.js +1 -0
  108. package/docs/kempo/utils/getPreferredTheme.js +1 -0
  109. package/docs/kempo/utils/loadCss.js +1 -0
  110. package/docs/kempo/utils/loadScript.js +1 -0
  111. package/docs/kempo/utils/object.js +1 -0
  112. package/docs/kempo/utils/string.js +1 -0
  113. package/docs/kempo/utils/toFunction.js +1 -0
  114. package/docs/kempo/utils/type.js +1 -0
  115. package/docs/kempo/utils/waitFrames.js +1 -0
  116. package/docs/nav-1.inc.html +66 -0
  117. package/docs/nav.inc.html +66 -0
  118. package/docs/search.json +94 -0
  119. package/docs/styles/_template.html +22 -0
  120. package/docs/styles/borders-spacing.html +193 -0
  121. package/docs/styles/buttons.html +113 -0
  122. package/docs/styles/colors.html +65 -0
  123. package/docs/styles/displays-layouts.html +156 -0
  124. package/docs/styles/embed-1.html +35 -0
  125. package/docs/styles/inputs.html +89 -0
  126. package/docs/styles/tables.html +143 -0
  127. package/docs/styles/typography.html +116 -0
  128. package/icons/arrow-down-double.svg +1 -0
  129. package/icons/arrow-up-double.svg +1 -0
  130. package/icons/close.svg +2 -0
  131. package/icons/compare.svg +1 -0
  132. package/icons/dark-mode.svg +1 -0
  133. package/icons/delete.svg +1 -0
  134. package/icons/filter-off.svg +1 -0
  135. package/icons/filter.svg +1 -0
  136. package/icons/light-mode.svg +1 -0
  137. package/icons/menu.svg +1 -0
  138. package/icons/pause.svg +1 -0
  139. package/icons/play.svg +1 -0
  140. package/icons/search.svg +1 -0
  141. package/icons/settings.svg +1 -0
  142. package/icons/storage.svg +1 -0
  143. package/icons/trash-x.svg +1 -0
  144. package/kempo/components/Card.js +65 -0
  145. package/kempo/components/CodeEditor.js +141 -0
  146. package/kempo/components/Component.js +109 -0
  147. package/kempo/components/Dialog.js +277 -0
  148. package/kempo/components/FocusCapture.js +30 -0
  149. package/kempo/components/Icon.js +60 -0
  150. package/kempo/components/Import.js +40 -0
  151. package/kempo/components/LazyComponent.js +40 -0
  152. package/kempo/components/ReactiveComponent.js +11 -0
  153. package/kempo/components/ReactiveLazyComponent.js +11 -0
  154. package/kempo/components/Resize.js +168 -0
  155. package/kempo/components/Search.js +136 -0
  156. package/kempo/components/ShowMore.js +82 -0
  157. package/kempo/components/SideMenu.js +156 -0
  158. package/kempo/components/Split.js +133 -0
  159. package/kempo/components/Tabs.js +254 -0
  160. package/kempo/components/ThemeSwitcher.js +77 -0
  161. package/kempo/components/Timestamp.js +25 -0
  162. package/kempo/components/WebSnippetEditor.js +159 -0
  163. package/kempo/kempo-hljs.css +145 -0
  164. package/kempo/kempo-styles.css +893 -0
  165. package/kempo/kempo-vars.css +154 -0
  166. package/kempo/kempo.js +48 -0
  167. package/kempo/utils/cli.js +54 -0
  168. package/kempo/utils/cookie.js +16 -0
  169. package/kempo/utils/debounce.js +9 -0
  170. package/kempo/utils/drag.js +74 -0
  171. package/kempo/utils/element.js +69 -0
  172. package/kempo/utils/formatTimestamp.js +11 -0
  173. package/kempo/utils/fuzzyMatch.js +55 -0
  174. package/kempo/utils/getPreferredTheme.js +1 -0
  175. package/kempo/utils/loadCss.js +10 -0
  176. package/kempo/utils/loadScript.js +10 -0
  177. package/kempo/utils/object.js +177 -0
  178. package/kempo/utils/string.js +54 -0
  179. package/kempo/utils/toFunction.js +24 -0
  180. package/kempo/utils/type.js +8 -0
  181. package/kempo/utils/waitFrames.js +17 -0
  182. package/package.json +33 -0
  183. package/scripts/build.js +131 -0
  184. package/scripts/docs.js +14 -0
  185. package/test/components/SuiteList.js +26 -0
  186. package/test/components/Test.js +357 -0
  187. package/test/index.html +49 -0
  188. package/test/index.js +25 -0
  189. package/test/suite.html +45 -0
  190. package/test/suites.inc.html +4 -0
  191. package/test/tests/components/Component.test.js +138 -0
  192. package/test/tests/utils/cli.test.js +113 -0
  193. package/test/tests/utils/cookie.test.js +87 -0
  194. package/test/tests/utils/debounce.test.js +71 -0
package/docs/styles/typography.html ADDED
@@ -0,0 +1,116 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Typography - Kempo - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
8
+ </head>
9
+ <body>
10
+ <k-import src="../nav-1.inc.html"></k-import>
11
+ <h1 class="ta-center">Typography</h1>
12
+ <main style="margin-bottom: 33vh">
13
+ <h3>Paragraphs</h3>
14
+ <div class="row -mx">
15
+ <div class="col m-span-12 px">
16
+ <k-card label="HTML">
17
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
18
+ </k-card>
19
+ </div>
20
+ <div class="col m-span-12 px">
21
+ <k-card label="Output">
22
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!</p>
23
+ </k-card>
24
+ </div>
25
+ </div>
26
+
27
+
28
+ <h3>Headings</h3>
29
+ <div class="row -mx">
30
+ <div class="col m-span-12 px">
31
+ <k-card label="HTML">
32
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Heading 1<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Heading 2<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Heading 3<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>Heading 4<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>Heading 5<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>Heading 6<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span></code></pre>
33
+ </k-card>
34
+ </div>
35
+ <div class="col m-span-12 px">
36
+ <k-card label="Output">
37
+ <h1>Heading 1</h1>
38
+ <h2>Heading 2</h2>
39
+ <h3>Heading 3</h3>
40
+ <h4>Heading 4</h4>
41
+ <h5>Heading 5</h5>
42
+ <h6>Heading 6</h6>
43
+ </k-card>
44
+ </div>
45
+ </div>
46
+
47
+
48
+ <h3>Text Markup</h3>
49
+ <div class="row -mx">
50
+ <div class="col m-span-12 px">
51
+ <k-card label="HTML">
52
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>strong<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>italics<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>strike<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">u</span>&gt;</span>underline<span class="hljs-tag">&lt;/<span class="hljs-name">u</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">sub</span>&gt;</span>sub<span class="hljs-tag">&lt;/<span class="hljs-name">sub</span>&gt;</span> Normal <span class="hljs-tag">&lt;<span class="hljs-name">sup</span>&gt;</span>super<span class="hljs-tag">&lt;/<span class="hljs-name">sup</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>bold<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">mark</span>&gt;</span>highlighted<span class="hljs-tag">&lt;/<span class="hljs-name">mark</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
53
+ </k-card>
54
+ </div>
55
+ <div class="col m-span-12 px">
56
+ <k-card label="Output">
57
+ <p><strong>strong</strong> <i>italics</i> <del>strike</del> <u>underline</u> <sub>sub</sub> Normal <sup>super</sup> <b>bold</b> <mark>highlighted</mark></p>
58
+ </k-card>
59
+ </div>
60
+ </div>
61
+
62
+ <h3>Lists</h3>
63
+ <div class="row -mx">
64
+ <div class="col m-span-12 px">
65
+ <k-card label="HTML">
66
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br /> Item 3<br /> <span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span></code></pre>
67
+ </k-card>
68
+ </div>
69
+ <div class="col m-span-12 px">
70
+ <k-card label="Output">
71
+ <ol>
72
+ <li>Item 1</li>
73
+ <li>Item 2</li>
74
+ <li>
75
+ Item 3
76
+ <ol>
77
+ <li>Sub Item 1</li>
78
+ <li>Sub Item 2</li>
79
+ <li>Sub Item 3</li>
80
+ </ol>
81
+ </li>
82
+ </ol>
83
+ </k-card>
84
+ </div>
85
+ </div>
86
+ <div class="row -mx">
87
+ <div class="col m-span-12 px">
88
+ <k-card label="HTML">
89
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br /> Item 3<br /> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Sub Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
90
+ </k-card>
91
+ </div>
92
+ <div class="col m-span-12 px">
93
+ <k-card label="Output">
94
+ <ul>
95
+ <li>Item 1</li>
96
+ <li>Item 2</li>
97
+ <li>
98
+ Item 3
99
+ <ul>
100
+ <li>Sub Item 1</li>
101
+ <li>Sub Item 2</li>
102
+ <li>Sub Item 3</li>
103
+ </ul>
104
+ </li>
105
+ </ul>
106
+ </k-card>
107
+ </div>
108
+ </div>
109
+ </main>
110
+ <script type="module">
111
+ import Icon from '../kempo/components/Icon.js';
112
+ Icon.pathToIcons = '../kempo/icons';
113
+ </script>
114
+ <script type="module" src="../kempo/components/Import.js"></script>
115
+ </body>
116
+ </html>
package/icons/arrow-down-double.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>
package/icons/arrow-up-double.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg>
package/icons/close.svg ADDED
@@ -0,0 +1,2 @@
1
+
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
package/icons/compare.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M400-40v-80H200q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h200v-80h80v880h-80ZM200-240h200v-240L200-240Zm360 120v-360l200 240v-520H560v-80h200q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H560Z"/></svg>
package/icons/dark-mode.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
package/icons/delete.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
package/icons/filter-off.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z"/></svg>
package/icons/filter.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>
package/icons/light-mode.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
package/icons/menu.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
package/icons/pause.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M28.25 38V10H36v28ZM12 38V10h7.75v28Z"/></svg>
package/icons/play.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M16 37.85v-28l22 14Z"/></svg>
package/icons/search.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path fill="currentColor" d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
package/icons/settings.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
package/icons/storage.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-160v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80-440v-160h720v160H120Zm80-40h80v-80h-80v80Zm-80 280v-160h720v160H120Zm80-40h80v-80h-80v80Z"/></svg>
package/icons/trash-x.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/></svg>
package/kempo/components/Card.js ADDED
@@ -0,0 +1,65 @@
1
+ import Component from './Component.js';
2
+ import {
3
+ setProp
4
+ } from '../utils/element.js';
5
+
6
+ export default class Card extends Component {
7
+ constructor(label = ''){
8
+ super();
9
+
10
+ this.registerAttribute('label', label);
11
+ }
12
+ attributeChangedCallback(n, oV, nV){
13
+ if(n === 'label'){
14
+ setProp(this.shadowRoot.getElementById('label'), 'innerHTML', nV);
15
+ }
16
+ }
17
+ get shadowTemplate(){
18
+ return /*html*/`
19
+ <div id="card">
20
+ <div id="label">${this.label}</div>
21
+ ${super.shadowTemplate}
22
+ </div>
23
+ `;
24
+ }
25
+ get shadowStyles(){
26
+ return /*css*/`
27
+ :host {
28
+ display: block;
29
+ }
30
+ #card {
31
+ border: 1px solid var(--c_border);
32
+ border-radius: var(--radius);
33
+ margin-bottom: var(--spacer);
34
+ padding: var(--spacer);
35
+ position: relative;
36
+ background-color: var(--c_bg);
37
+ }
38
+ #label {
39
+ position: absolute;
40
+ top: -1.25em;
41
+ left: 1.25em;
42
+ background-color: var(--c_bg);
43
+ border: 1px solid var(--c_border);
44
+ border-radius: var(--radius);
45
+ padding: var(--spacer_h);
46
+ }
47
+ :host([label]) {
48
+ padding-top: calc(1.5 * var(--spacer));
49
+ margin-top: var(--spacer);
50
+ }
51
+ :host([label]) #card {
52
+ padding-top: calc(1.5 * var(--spacer));
53
+ }
54
+ :host(:not([label])) #label {
55
+ display: none;
56
+ }
57
+
58
+ `;
59
+ }
60
+
61
+ static get renderOnAttributes(){
62
+ return ["label"];
63
+ }
64
+ }
65
+ window.customElements.define('k-card', Card);
package/kempo/components/CodeEditor.js ADDED
@@ -0,0 +1,141 @@
1
+ import Component from './Component.js';
2
+ import hljs from 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js';
3
+ import {
4
+ escapeHTML
5
+ } from '../utils/string.js';
6
+
7
+ const keyDownHandler = Symbol(),
8
+ lastValue = Symbol();
9
+ export default class CodeEditor extends Component {
10
+ constructor(){
11
+ super();
12
+
13
+ /* Private Members */
14
+ this[lastValue] = '';
15
+
16
+ /* Private Methods */
17
+ this[keyDownHandler] = (event) => {
18
+ const { key } = event;
19
+ if(key == 'Tab'){
20
+ event.preventDefault();
21
+ document.execCommand('insertText', false, ' ');
22
+ } else if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
23
+ event.preventDefault();
24
+ document.execCommand('undo', false, null);
25
+ }
26
+ }
27
+
28
+ this.registerAttribute('language', '');
29
+ }
30
+
31
+ async connectedCallback(){
32
+ super.connectedCallback();
33
+ const $editor = this.shadowRoot.getElementById('editor');
34
+ $editor.addEventListener('keydown', this[keyDownHandler]);
35
+ this.addEventListener('blur', this.highlight);
36
+ this.value = escapeHTML(this.textContent.trim());
37
+ }
38
+ disconnectedCallback(){
39
+ super.disconnectedCallback();
40
+ this.shadowRoot.getElementById('editor').removeEventListener('keydown', this[keyDownHandler]);
41
+ }
42
+
43
+ highlight(){
44
+ if(this.value !== this[lastValue]){
45
+ this.dispatchEvent(new CustomEvent('change'));
46
+ }
47
+ let result;
48
+ if(this.language){
49
+ result = hljs.highlight(
50
+ this.value,
51
+ { language: this.language }
52
+ )
53
+ } else {
54
+ result = hljs.highlightAuto(this.value);
55
+ }
56
+ this.shadowRoot.getElementById('editor').innerHTML = result.value.split('\n').map(p=>`<div class="line">${p}</div>`).join('');
57
+ this[lastValue] = this.value;
58
+ }
59
+
60
+ get value(){
61
+ return [...this.shadowRoot.getElementById('editor').querySelectorAll('.line')].map($line=>$line.textContent).join('\n');
62
+ }
63
+ set value(v){
64
+ this.shadowRoot.getElementById('editor').innerHTML = v.split('\n').map(p=>`<div class="line">${p}</div>`).join('');
65
+ this.highlight();
66
+ }
67
+
68
+ get shadowTemplate(){
69
+ return /*html*/`
70
+ <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
71
+ <pre id="editor" contenteditable="true"></pre>
72
+ `;
73
+ }
74
+ get shadowStyles(){
75
+ return /*css*/`
76
+ ${super.shadowStyles}
77
+ :root {
78
+ --d_caret: white;
79
+ --l_caret: black;
80
+ --caret: var(--l_caret);
81
+ }
82
+ @media (prefers-color-scheme: light) {
83
+ :root:not([theme="dark"]) {
84
+ --caret: var(--l_caret);
85
+ }
86
+ }
87
+ :root[theme="light"] {
88
+ --caret: var(--l_caret);
89
+ }
90
+ @media (prefers-color-scheme: dark) {
91
+ :root:not([theme="light"]) {
92
+ --caret: var(--d_caret);
93
+ }
94
+ }
95
+ :root[theme="dark"] {
96
+ --caret: var(--d_caret);
97
+ }
98
+ :host {
99
+ display: block;
100
+ border: 1px solid var(--c_border);
101
+ border-radius: var(--radius);
102
+ max-height: 20rem;
103
+ overflow: auto;
104
+ caret-color: var(--caret);
105
+ }
106
+ :host(:focus-within){
107
+ box-shadow: var(--focus_shadow);
108
+ }
109
+ #editor {
110
+ min-height: 6rem;
111
+ outline: none;
112
+ font-family: var(--ff_mono);
113
+ resize: vertical;
114
+ padding: var(--spacer);
115
+ margin-bottom: 0;
116
+ resize: vertical;
117
+ counter-reset: line-number;
118
+ white-space: pre-wrap;
119
+ padding-left: 2.5rem;
120
+ position: relative;
121
+ }
122
+ #editor .line::before {
123
+ content: counter(line-number); /* Use the counter value as content */
124
+ counter-increment: line-number; /* Increment the counter */
125
+ display: inline-block;
126
+ width: 2rem;
127
+ text-align: right; /* Align numbers to the right */
128
+ opacity: 0.65;
129
+ position: absolute;
130
+ left: 0;
131
+ user-select: none;
132
+ }
133
+ .line {
134
+ width: 100%;
135
+ overflow-wrap: break-word;
136
+ word-break: break-all;
137
+ }
138
+ `;
139
+ }
140
+ }
141
+ window.customElements.define('k-code-editor', CodeEditor);
package/kempo/components/Component.js ADDED
@@ -0,0 +1,109 @@
1
+ import {
2
+ getCase
3
+ } from '../utils/string.js';
4
+
5
+ export default class Component extends HTMLElement {
6
+ constructor(shadowDetails = {}){
7
+ super();
8
+ this.attachShadow({mode: 'open', ...shadowDetails});
9
+ this.registerAttribute('rendered', false);
10
+ }
11
+ async connectedCallback(){
12
+ this.render();
13
+ };
14
+ async disconnectedCallback(){};
15
+ async attributeChangedCallback(){};
16
+ async propChangedCallback(){};
17
+ async render(force = false){
18
+ if(force || !this.rendered){
19
+ this.shadowRoot.innerHTML = `<link rel="stylesheet" href="${Component.pathToKempo}/kempo-styles.css" />${this.shadowTemplate}<style>${this.shadowStyles}</style>`;
20
+ this.rendered = true;
21
+ return true;
22
+ }
23
+ }
24
+ registerAttribute(name, defaultValue = ''){
25
+ const {
26
+ camel: camelName,
27
+ dash: dashName
28
+ } = getCase(name);
29
+ const type = typeof(defaultValue);
30
+ Object.defineProperty(this, camelName, {
31
+ get: () => {
32
+ const value = this.getAttribute(dashName);
33
+ if(type == 'number'){
34
+ return parseFloat(value);
35
+ } else if(type === 'object'){
36
+ return typeof(value)==='string'?JSON.parse(value):value;
37
+ } else if(type === 'boolean'){
38
+ return typeof(value)==='string'?value.toLowerCase().trim()==='true':!!value;
39
+ } else if(type === 'string'){
40
+ return value || '';
41
+ } else {
42
+ return value;
43
+ }
44
+ },
45
+ set: (value) => {
46
+ if(this[dashName] === value) return; // no change
47
+ if(type === 'boolean'){
48
+ if(value){
49
+ this.setAttribute(dashName, 'true');
50
+ } else {
51
+ this.removeAttribute(dashName);
52
+ }
53
+ } else if(type === 'object'){
54
+ this.setAttribute(dashName, JSON.stringify(value || {}));
55
+ } else if(type === 'number'){
56
+ if(value || value === 0){
57
+ this.setAttribute(dashName, value);
58
+ } else {
59
+ this.removeAttribute(dashName);
60
+ }
61
+ } else {
62
+ this.setAttribute(dashName, value);
63
+ }
64
+ }
65
+ });
66
+ if(this.getAttribute(dashName) === null) this[camelName] = defaultValue;
67
+ }
68
+ registerAttributes(attrs){
69
+ for(const key in attrs){
70
+ this.registerAttribute(key, attrs[key]);
71
+ }
72
+ }
73
+ registerProp(name, value){
74
+ const propSymbol = Symbol(name);
75
+ this[propSymbol] = value;
76
+ Object.defineProperty(this, name, {
77
+ get: () => {
78
+ return this[propSymbol];
79
+ },
80
+ set: (value) => {
81
+ if(this[propSymbol] !== value){
82
+ const oldValue = this[propSymbol];
83
+ this[propSymbol] = value;
84
+ this.propChangedCallback(name, oldValue, value);
85
+ }
86
+ }
87
+ });
88
+ }
89
+ registerProps(props){
90
+ for(const key in props){
91
+ this.registerProp(key, props[key]);
92
+ }
93
+ }
94
+ renderIf(condition, html){
95
+ return condition?html:''
96
+ }
97
+
98
+ get shadowTemplate(){
99
+ return /*html*/`
100
+ <slot></slot>
101
+ `;
102
+ }
103
+ get shadowStyles(){
104
+ return /*css*/``;
105
+ }
106
+
107
+ static observedAttributes = ['rendered'];
108
+ static pathToKempo = import.meta.url.substring(0, import.meta.url.indexOf('/components/Component.js') );
109
+ }