kempo-ui 0.0.2 → 0.0.4

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 (278) hide show
  1. package/.github/copilot-instructions.md +149 -149
  2. package/.github/workflows/publish-major.yml +39 -0
  3. package/.github/workflows/publish-minor.yml +39 -0
  4. package/.github/workflows/{publish-npm.yml → publish-patch.yml} +44 -44
  5. package/.vscode/settings.json +2 -0
  6. package/CONTRIBUTING.md +149 -149
  7. package/README.md +0 -0
  8. package/dist/kempo-hljs.css +1 -0
  9. package/dist/kempo-vars.css +0 -0
  10. package/dist/src/components/Accordion.js +36 -0
  11. package/dist/src/components/Card.js +37 -0
  12. package/dist/src/components/Collapsible.js +41 -0
  13. package/dist/src/components/ContentSlider.js +44 -0
  14. package/dist/src/components/Dialog.js +113 -0
  15. package/dist/src/components/FocusCapture.js +7 -0
  16. package/dist/src/components/Icon.js +10 -0
  17. package/dist/src/components/Import.js +1 -0
  18. package/dist/src/components/PersistantCollapsible.js +1 -0
  19. package/dist/src/components/PhotoViewer.js +135 -0
  20. package/dist/src/components/Resize.js +96 -0
  21. package/dist/src/components/ShadowComponent.js +1 -0
  22. package/dist/src/components/ShowMore.js +42 -0
  23. package/dist/src/components/SideMenu.js +97 -0
  24. package/dist/src/components/Split.js +84 -0
  25. package/dist/src/components/Tabs.js +155 -0
  26. package/dist/src/components/Tags.js +69 -0
  27. package/dist/src/components/ThemeSwitcher.js +23 -0
  28. package/dist/src/components/Timestamp.js +1 -0
  29. package/dist/src/lit-all.min.js +120 -0
  30. package/dist/src/utils/debounce.js +1 -0
  31. package/dist/src/utils/drag.js +1 -0
  32. package/dist/src/utils/formatTimestamp.js +1 -0
  33. package/dist/src/utils/propConverters.js +1 -0
  34. package/dist/src/utils/watchWindowSize.js +1 -0
  35. package/docs/components/accordion.html +166 -0
  36. package/docs/components/card.html +92 -0
  37. package/docs/components/collapsible.html +198 -0
  38. package/docs/components/content-slider.html +223 -0
  39. package/docs/components/dialog.html +251 -0
  40. package/docs/components/focus-capture.html +67 -0
  41. package/docs/components/icon.html +158 -0
  42. package/docs/components/import.html +73 -0
  43. package/docs/components/persistant-collapsible.html +123 -0
  44. package/docs/components/photo-viewer.html +226 -0
  45. package/docs/components/resize.html +178 -0
  46. package/docs/components/show-more.html +129 -0
  47. package/docs/components/side-menu.html +159 -0
  48. package/docs/components/split.html +147 -0
  49. package/docs/components/table.html +312 -0
  50. package/docs/components/tableControls.html +77 -0
  51. package/docs/components/tableCustomFields.html +113 -0
  52. package/docs/components/tableFetchRecords.html +114 -0
  53. package/docs/components/tableFieldSortHide.html +75 -0
  54. package/docs/components/tablePagination.html +100 -0
  55. package/docs/components/tableRecordEditing.html +144 -0
  56. package/docs/components/tableRecordFiltering.html +88 -0
  57. package/docs/components/tableRecordHiding.html +80 -0
  58. package/docs/components/tableRecordSearching.html +75 -0
  59. package/docs/components/tableRecordSelection.html +75 -0
  60. package/docs/components/tableRowControls.html +78 -0
  61. package/docs/components/tableSorting.html +73 -0
  62. package/docs/components/tabs.html +180 -0
  63. package/docs/components/tags.html +110 -0
  64. package/docs/components/theme-switcher.html +126 -0
  65. package/docs/components/timestamp.html +82 -0
  66. package/docs/components/toast.html +319 -0
  67. package/docs/components/toggle.html +156 -0
  68. package/docs/dev.config.json +20 -0
  69. package/docs/icons/add.svg +1 -0
  70. package/docs/icons/arrow-back.svg +1 -0
  71. package/docs/icons/arrow-down-double.svg +1 -0
  72. package/docs/icons/arrow-down.svg +1 -0
  73. package/docs/icons/arrow-forward.svg +1 -0
  74. package/docs/icons/arrow-up-double.svg +1 -0
  75. package/docs/icons/arrow-up.svg +1 -0
  76. package/docs/icons/cards.svg +1 -0
  77. package/docs/icons/check.svg +1 -0
  78. package/docs/icons/chevron-left.svg +1 -0
  79. package/docs/icons/chevron-right.svg +1 -0
  80. package/docs/icons/close.svg +2 -0
  81. package/docs/icons/compare.svg +1 -0
  82. package/docs/icons/delete.svg +1 -0
  83. package/docs/icons/drag-handle.svg +1 -0
  84. package/docs/icons/drawing2.svg +124 -0
  85. package/docs/icons/edit.svg +1 -0
  86. package/docs/icons/error.svg +1 -0
  87. package/docs/icons/export-file.svg +1 -0
  88. package/docs/icons/file-text.svg +1 -0
  89. package/docs/icons/file.svg +1 -0
  90. package/docs/icons/filter-off.svg +1 -0
  91. package/docs/icons/filter.svg +1 -0
  92. package/docs/icons/first.svg +1 -0
  93. package/docs/icons/folder-clear.svg +1 -0
  94. package/docs/icons/folder-create.svg +1 -0
  95. package/docs/icons/folder-open.svg +1 -0
  96. package/docs/icons/folder.svg +1 -0
  97. package/docs/icons/hide.svg +1 -0
  98. package/docs/icons/image.svg +1 -0
  99. package/docs/icons/label-add.svg +1 -0
  100. package/docs/icons/label.svg +1 -0
  101. package/docs/icons/last.svg +1 -0
  102. package/docs/icons/menu.svg +1 -0
  103. package/docs/icons/mode-auto.svg +1 -0
  104. package/docs/icons/mode-dark.svg +1 -0
  105. package/docs/icons/mode-light.svg +1 -0
  106. package/docs/icons/open-in-browser.svg +1 -0
  107. package/docs/icons/pause.svg +1 -0
  108. package/docs/icons/play.svg +1 -0
  109. package/docs/icons/refresh.svg +1 -0
  110. package/docs/icons/remove.svg +1 -0
  111. package/docs/icons/save.svg +1 -0
  112. package/docs/icons/search.svg +1 -0
  113. package/docs/icons/settings.svg +1 -0
  114. package/docs/icons/show.svg +1 -0
  115. package/docs/icons/storage.svg +1 -0
  116. package/docs/icons/table-visibility.svg +1 -0
  117. package/docs/icons/tag.svg +1 -0
  118. package/docs/icons/tools.svg +1 -0
  119. package/docs/icons/trash-x.svg +1 -0
  120. package/docs/icons/warning.svg +1 -0
  121. package/docs/index.html +28 -21
  122. package/docs/kempo-hljs.css +1 -0
  123. package/docs/media/civic.jpg +0 -0
  124. package/docs/media/corvette.jpg +0 -0
  125. package/docs/media/evo.jpg +0 -0
  126. package/docs/media/gtr.jpg +0 -0
  127. package/docs/media/nsx.jpg +0 -0
  128. package/docs/nav.inc.html +67 -0
  129. package/docs/nav.inc.js +4 -0
  130. package/{config/production.json → docs/prod.config.json} +20 -16
  131. package/docs/src/components/Accordion.js +36 -0
  132. package/docs/src/components/Card.js +37 -0
  133. package/docs/src/components/Collapsible.js +41 -0
  134. package/docs/src/components/ContentSlider.js +44 -0
  135. package/docs/src/components/Dialog.js +113 -0
  136. package/docs/src/components/FocusCapture.js +7 -0
  137. package/docs/src/components/HybridComponent.js +1 -0
  138. package/docs/src/components/Icon.js +10 -0
  139. package/docs/src/components/Import.js +1 -0
  140. package/docs/src/components/LightComponent.js +1 -0
  141. package/docs/src/components/PersistantCollapsible.js +1 -0
  142. package/docs/src/components/PhotoViewer.js +135 -0
  143. package/docs/src/components/Resize.js +96 -0
  144. package/docs/src/components/ShadowComponent.js +1 -0
  145. package/docs/src/components/ShowMore.js +42 -0
  146. package/docs/src/components/SideMenu.js +97 -0
  147. package/docs/src/components/Split.js +84 -0
  148. package/docs/src/components/Tabs.js +155 -0
  149. package/docs/src/components/Tags.js +69 -0
  150. package/docs/src/components/ThemeSwitcher.js +23 -0
  151. package/docs/src/components/Timestamp.js +1 -0
  152. package/docs/src/lit-all.min.js +120 -0
  153. package/docs/src/utils/debounce.js +1 -0
  154. package/docs/src/utils/drag.js +1 -0
  155. package/docs/src/utils/formatTimestamp.js +1 -0
  156. package/docs/src/utils/propConverters.js +1 -0
  157. package/docs/src/utils/watchWindowSize.js +1 -0
  158. package/docs/styles.css +6 -0
  159. package/docs/utils/debounce.html +78 -0
  160. package/docs/utils/drag.html +104 -0
  161. package/docs/utils/formatTimestamp.html +114 -0
  162. package/docs/utils/propConverters.html +132 -0
  163. package/docs/utils/watchWindowSize.html +166 -0
  164. package/icons/add.svg +1 -0
  165. package/icons/arrow-back.svg +1 -0
  166. package/icons/arrow-down-double.svg +1 -0
  167. package/icons/arrow-down.svg +1 -0
  168. package/icons/arrow-forward.svg +1 -0
  169. package/icons/arrow-up-double.svg +1 -0
  170. package/icons/arrow-up.svg +1 -0
  171. package/icons/cards.svg +1 -0
  172. package/icons/check.svg +1 -0
  173. package/icons/chevron-left.svg +1 -0
  174. package/icons/chevron-right.svg +1 -0
  175. package/icons/close.svg +2 -0
  176. package/icons/compare.svg +1 -0
  177. package/icons/delete.svg +1 -0
  178. package/icons/drag-handle.svg +1 -0
  179. package/icons/drawing2.svg +124 -0
  180. package/icons/edit.svg +1 -0
  181. package/icons/error.svg +1 -0
  182. package/icons/export-file.svg +1 -0
  183. package/icons/file-text.svg +1 -0
  184. package/icons/file.svg +1 -0
  185. package/icons/filter-off.svg +1 -0
  186. package/icons/filter.svg +1 -0
  187. package/icons/first.svg +1 -0
  188. package/icons/folder-clear.svg +1 -0
  189. package/icons/folder-create.svg +1 -0
  190. package/icons/folder-open.svg +1 -0
  191. package/icons/folder.svg +1 -0
  192. package/icons/hide.svg +1 -0
  193. package/icons/image.svg +1 -0
  194. package/icons/label-add.svg +1 -0
  195. package/icons/label.svg +1 -0
  196. package/icons/last.svg +1 -0
  197. package/icons/menu.svg +1 -0
  198. package/icons/mode-auto.svg +1 -0
  199. package/icons/mode-dark.svg +1 -0
  200. package/icons/mode-light.svg +1 -0
  201. package/icons/open-in-browser.svg +1 -0
  202. package/icons/pause.svg +1 -0
  203. package/icons/play.svg +1 -0
  204. package/icons/refresh.svg +1 -0
  205. package/icons/remove.svg +1 -0
  206. package/icons/save.svg +1 -0
  207. package/icons/search.svg +1 -0
  208. package/icons/settings.svg +1 -0
  209. package/icons/show.svg +1 -0
  210. package/icons/storage.svg +1 -0
  211. package/icons/table-visibility.svg +1 -0
  212. package/icons/tag.svg +1 -0
  213. package/icons/tools.svg +1 -0
  214. package/icons/trash-x.svg +1 -0
  215. package/icons/warning.svg +1 -0
  216. package/package.json +2 -2
  217. package/scripts/build.js +109 -138
  218. package/scripts/docs.js +62 -60
  219. package/src/components/Accordion.js +229 -0
  220. package/src/components/Card.js +66 -0
  221. package/src/components/Collapsible.js +109 -0
  222. package/src/components/ContentSlider.js +205 -0
  223. package/src/components/Dialog.js +368 -0
  224. package/src/components/FocusCapture.js +23 -0
  225. package/src/components/HybridComponent.js +40 -40
  226. package/src/components/Icon.js +155 -0
  227. package/src/components/Import.js +104 -0
  228. package/src/components/LightComponent.js +32 -32
  229. package/src/components/PersistantCollapsible.js +69 -0
  230. package/src/components/PhotoViewer.js +368 -0
  231. package/src/components/Resize.js +210 -0
  232. package/src/components/ShadowComponent.js +32 -17
  233. package/src/components/ShowMore.js +109 -0
  234. package/src/components/SideMenu.js +167 -0
  235. package/src/components/Sortable.js +193 -0
  236. package/src/components/Split.js +192 -0
  237. package/src/components/Table.js +1202 -0
  238. package/src/components/Tabs.js +428 -0
  239. package/src/components/Tags.js +253 -0
  240. package/src/components/ThemeSwitcher.js +108 -0
  241. package/src/components/Timestamp.js +31 -0
  242. package/src/components/Toast.js +454 -0
  243. package/src/components/Toggle.js +173 -0
  244. package/src/components/tableControls/DeleteRecord.js +29 -0
  245. package/src/components/tableControls/Edit.js +88 -0
  246. package/src/components/tableControls/ExportCSV.js +71 -0
  247. package/src/components/tableControls/ExportJson.js +55 -0
  248. package/src/components/tableControls/FieldSortHide.js +76 -0
  249. package/src/components/tableControls/Filters.js +114 -0
  250. package/src/components/tableControls/FirstPage.js +65 -0
  251. package/src/components/tableControls/HiddenCount.js +45 -0
  252. package/src/components/tableControls/Hide.js +34 -0
  253. package/src/components/tableControls/LastPage.js +65 -0
  254. package/src/components/tableControls/NextPage.js +65 -0
  255. package/src/components/tableControls/PageSelect.js +109 -0
  256. package/src/components/tableControls/PageSize.js +68 -0
  257. package/src/components/tableControls/PrevPage.js +65 -0
  258. package/src/components/tableControls/Search.js +58 -0
  259. package/src/components/tableControls/ShowAll.js +34 -0
  260. package/src/components/tableControls/TableControl.js +105 -0
  261. package/src/kempo-hljs.css +146 -0
  262. package/src/utils/debounce.js +9 -0
  263. package/src/utils/drag.js +80 -0
  264. package/src/utils/formatTimestamp.js +27 -0
  265. package/src/utils/propConverters.js +11 -0
  266. package/src/utils/toTitleCase.js +9 -0
  267. package/src/utils/watchWindowSize.js +16 -0
  268. package/tests/HybridComponent.browser-test.js +214 -214
  269. package/tests/LightComponent.browser-test.js +169 -169
  270. package/tests/ShadowComponent.browser-test.js +130 -130
  271. package/config/development.json +0 -14
  272. package/docs/components/ShadowComponent.js +0 -1
  273. package/src/utils/cli.js +0 -43
  274. package/src/utils/fs-utils.js +0 -41
  275. /package/{docs → dist/src}/components/HybridComponent.js +0 -0
  276. /package/{docs → dist/src}/components/LightComponent.js +0 -0
  277. /package/docs/{utils → src/utils}/cli.js +0 -0
  278. /package/docs/{utils → src/utils}/fs-utils.js +0 -0
package/docs/components/tableRecordHiding.html ADDED
@@ -0,0 +1,80 @@
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>Row Controls - Table - Kempo Docs</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module" src="../src/components/Table.js"></script>
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ <script>
18
+ window.contacts = [];
19
+ function generateContact(){
20
+ const maleNames = [
21
+ "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
22
+ "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
23
+ "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
24
+ "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
25
+ "Wyatt", "Matthew"
26
+ ];
27
+ const femaleNames = [
28
+ "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
29
+ "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
30
+ "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
31
+ "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
32
+ "Grace", "Nora", "Riley", "Zoey"
33
+ ];
34
+ const lastNames = [
35
+ "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
36
+ "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
37
+ "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
38
+ "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
39
+ "Ramirez", "Lewis", "Robinson"
40
+ ];
41
+ const gender = Math.random() > 0.5 ? 'm' : 'f';
42
+ const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
43
+ const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
44
+ const name = `${firstName} ${lastName}`;
45
+ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
46
+ const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
47
+ const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
48
+ return { name, email, birthday, phoneNumber, gender };
49
+ }
50
+ for (let i = 0; i < 10; i++) {
51
+ contacts.push(generateContact());
52
+ };
53
+ </script>
54
+ </head>
55
+ <body>
56
+ <k-import src="../nav.inc.html"></k-import>
57
+ <h1 class="ta-center">Table - Record Hiding</h1>
58
+ <main>
59
+
60
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
61
+
62
+ <p>The table component supports record hiding. To allow for hiding add the "hide" control to the "before" or "after" controls. There is a built-in "showAll" control that can be added to the "top" or "bottom" controls to reveal previously hidden fields.</p>
63
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordHidingExample"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hide</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-show-all</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-show-all</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Hide.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/HiddenCount.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/ShowAll.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
64
+ <k-table id="recordHidingExample">
65
+ <k-tc-hide slot="after"></k-tc-hide>
66
+ <k-tc-hidden-count></k-tc-hidden-count>
67
+ <k-tc-show-all></k-tc-show-all>
68
+ </k-table>
69
+ <script type="module" src="../src/components/tableControls/Hide.js"></script>
70
+ <script type="module" src="../src/components/tableControls/HiddenCount.js"></script>
71
+ <script type="module" src="../src/components/tableControls/ShowAll.js"></script>
72
+ <script type="module">
73
+ document.getElementById('recordHidingExample').setRecords(contacts);
74
+ </script>
75
+
76
+ </main>
77
+ <div style="height: 33.333vh"></div>
78
+ <script type="module" src="../src/components/Import.js"></script>
79
+ </body>
80
+ </html>
package/docs/components/tableRecordSearching.html ADDED
@@ -0,0 +1,75 @@
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>Record Searching - Table - Kempo Docs</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module" src="../src/components/Table.js"></script>
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ <script>
18
+ window.contacts = [];
19
+ function generateContact(){
20
+ const maleNames = [
21
+ "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
22
+ "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
23
+ "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
24
+ "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
25
+ "Wyatt", "Matthew"
26
+ ];
27
+ const femaleNames = [
28
+ "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
29
+ "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
30
+ "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
31
+ "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
32
+ "Grace", "Nora", "Riley", "Zoey"
33
+ ];
34
+ const lastNames = [
35
+ "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
36
+ "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
37
+ "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
38
+ "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
39
+ "Ramirez", "Lewis", "Robinson"
40
+ ];
41
+ const gender = Math.random() > 0.5 ? 'm' : 'f';
42
+ const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
43
+ const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
44
+ const name = `${firstName} ${lastName}`;
45
+ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
46
+ const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
47
+ const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
48
+ return { name, email, birthday, phoneNumber, gender };
49
+ }
50
+ for (let i = 0; i < 10; i++) {
51
+ contacts.push(generateContact());
52
+ };
53
+ </script>
54
+ </head>
55
+ <body>
56
+ <k-import src="../nav.inc.html"></k-import>
57
+ <h1 class="ta-center">Table - Record Searching</h1>
58
+ <main>
59
+
60
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
61
+
62
+ <p>The search control (aka quick filter) is a feature that allows users to filter the records displayed in the table. The control is a search input that can be used to filter records based on the values in the columns.</p>
63
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quickFilterExample"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 20rem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Search.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'quickFilterExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
64
+ <k-table id="quickFilterExample">
65
+ <k-tc-search slot="top" style="width: 20rem"></k-tc-search>
66
+ </k-table>
67
+ <script type="module" src="../src/components/tableControls/Search.js"></script>
68
+ <script type="module">
69
+ document.getElementById('quickFilterExample').setRecords(contacts);
70
+ </script>
71
+ </main>
72
+ <div style="height: 33.333vh"></div>
73
+ <script type="module" src="../src/components/Import.js"></script>
74
+ </body>
75
+ </html>
package/docs/components/tableRecordSelection.html ADDED
@@ -0,0 +1,75 @@
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>Record Selection - Table - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module" src="../src/components/Table.js"></script>
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ <script>
18
+ window.contacts = [];
19
+ function generateContact(){
20
+ const maleNames = [
21
+ "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
22
+ "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
23
+ "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
24
+ "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
25
+ "Wyatt", "Matthew"
26
+ ];
27
+ const femaleNames = [
28
+ "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
29
+ "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
30
+ "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
31
+ "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
32
+ "Grace", "Nora", "Riley", "Zoey"
33
+ ];
34
+ const lastNames = [
35
+ "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
36
+ "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
37
+ "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
38
+ "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
39
+ "Ramirez", "Lewis", "Robinson"
40
+ ];
41
+ const gender = Math.random() > 0.5 ? 'm' : 'f';
42
+ const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
43
+ const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
44
+ const name = `${firstName} ${lastName}`;
45
+ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
46
+ const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
47
+ const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
48
+ return { name, email, birthday, phoneNumber, gender };
49
+ }
50
+ for (let i = 0; i < 10; i++) {
51
+ contacts.push(generateContact());
52
+ };
53
+ </script>
54
+ </head>
55
+ <body>
56
+ <k-import src="../nav.inc.html"></k-import>
57
+ <h1 class="ta-center">Table - Record Selection</h1>
58
+ <main>
59
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
60
+
61
+ <p>The table component supports record selection. You can enable selection by setting the <code>enable-selection</code> attribute to <code>true</code>. This will add a checkbox to each row and a "Select All" checkbox to the header.</p>
62
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br /> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span><br /> <span class="hljs-attr">enable-selection</span><br />&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Table.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
63
+ <k-table
64
+ id="recordSelectionExample"
65
+ enable-selection
66
+ ></k-table>
67
+ <script type="module">
68
+ import Table from '../src/components/Table.js';
69
+ document.getElementById('recordSelectionExample').setRecords(contacts);
70
+ </script>
71
+ </main>
72
+ <div style="height: 33.333vh"></div>
73
+ <script type="module" src="../src/components/Import.js"></script>
74
+ </body>
75
+ </html>
package/docs/components/tableRowControls.html ADDED
@@ -0,0 +1,78 @@
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>Row Controls - Table - Kempo Docs</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module" src="../src/components/Table.js"></script>
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ <script>
18
+ window.contacts = [];
19
+ function generateContact(){
20
+ const maleNames = [
21
+ "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
22
+ "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
23
+ "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
24
+ "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
25
+ "Wyatt", "Matthew"
26
+ ];
27
+ const femaleNames = [
28
+ "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
29
+ "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
30
+ "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
31
+ "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
32
+ "Grace", "Nora", "Riley", "Zoey"
33
+ ];
34
+ const lastNames = [
35
+ "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
36
+ "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
37
+ "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
38
+ "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
39
+ "Ramirez", "Lewis", "Robinson"
40
+ ];
41
+ const gender = Math.random() > 0.5 ? 'm' : 'f';
42
+ const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
43
+ const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
44
+ const name = `${firstName} ${lastName}`;
45
+ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
46
+ const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
47
+ const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
48
+ return { name, email, birthday, phoneNumber, gender };
49
+ }
50
+ for (let i = 0; i < 5; i++) {
51
+ contacts.push(generateContact());
52
+ };
53
+ </script>
54
+ </head>
55
+ <body>
56
+ <k-import src="../nav.inc.html"></k-import>
57
+ <h1 class="ta-center">Table - Row Controls</h1>
58
+ <main>
59
+
60
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
61
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"export-file"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-json</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-record</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/ExportJson.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/DeleteRecord.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
62
+ <p>The table component can display controls before or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function.</p>
63
+ <k-table id="rowControlsExample">
64
+ <k-tc-export-json slot="before" max-width="40">
65
+ <k-icon name="export-file"></k-icon>
66
+ </k-tc-export-json>
67
+ <k-tc-delete-record slot="after"></k-tc-delete-record>
68
+ </k-table>
69
+ <script type="module" src="../src/components/tableControls/ExportJson.js"></script>
70
+ <script type="module" src="../src/components/tableControls/DeleteRecord.js"></script>
71
+ <script type="module">
72
+ document.getElementById('rowControlsExample').setRecords(contacts);
73
+ </script>
74
+ </main>
75
+ <div style="height: 33.333vh"></div>
76
+ <script type="module" src="../src/components/Import.js"></script>
77
+ </body>
78
+ </html>
package/docs/components/tableSorting.html ADDED
@@ -0,0 +1,73 @@
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>Sorting - Table - Kempo Docs</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" />
8
+ <link rel="stylesheet" href="../kempo.min.css" />
9
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module" src="../src/components/Table.js"></script>
11
+ <script type="module">
12
+ import Import from '../src/components/Import.js';
13
+ import Icon from '../src/components/Icon.js';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ <script>
18
+ window.contacts = [];
19
+ function generateContact(){
20
+ const maleNames = [
21
+ "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
22
+ "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
23
+ "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
24
+ "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
25
+ "Wyatt", "Matthew"
26
+ ];
27
+ const femaleNames = [
28
+ "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
29
+ "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
30
+ "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
31
+ "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
32
+ "Grace", "Nora", "Riley", "Zoey"
33
+ ];
34
+ const lastNames = [
35
+ "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
36
+ "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
37
+ "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
38
+ "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
39
+ "Ramirez", "Lewis", "Robinson"
40
+ ];
41
+ const gender = Math.random() > 0.5 ? 'm' : 'f';
42
+ const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
43
+ const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
44
+ const name = `${firstName} ${lastName}`;
45
+ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
46
+ const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
47
+ const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
48
+ return { name, email, birthday, phoneNumber, gender };
49
+ }
50
+ for (let i = 0; i < 10; i++) {
51
+ contacts.push(generateContact());
52
+ };
53
+ </script>
54
+ </head>
55
+ <body>
56
+ <k-import src="../nav.inc.html"></k-import>
57
+ <h1 class="ta-center">Table - Sorting</h1>
58
+ <main>
59
+
60
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
61
+
62
+ <p>The sorting feature allows users to sort the records displayed in the table by clicking on the column headers. This is enabled by setting the <code>enable-sorting="true"</code> attribute.</p>
63
+ <p>Once enabled the user can sort the records by clicking on the fields.</p>
64
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortingExample"</span> <span class="hljs-attr">enable-sorting</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
65
+ <k-table id="sortingExample" enable-sorting="true"></k-table>
66
+ <script type="module">
67
+ document.getElementById('sortingExample').setRecords(contacts);
68
+ </script>
69
+ </main>
70
+ <div style="height: 33.333vh"></div>
71
+ <script type="module" src="../src/components/Import.js"></script>
72
+ </body>
73
+ </html>