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/tableFetchRecords.html ADDED
@@ -0,0 +1,114 @@
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>Table - Fetch Records - 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 - Fetch Records</h1>
58
+ <main>
59
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
60
+
61
+ <p>The <code>setupFetchRecords</code> function is used to configure the table to fetch records dynamically. It takes two parameters: the total number of records and a function that fetching records. It should be an asynconous function that returns/resolves an array of records that will populate the table.</p>
62
+ <p>In this example, the <code>simulateFetchRecords</code> function generates a specified number of random contact records and resolves the promise after a delay, simulating an asynchronous fetch operation.
63
+ </p>
64
+ <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">"fetchRecordsExample"</span><br /> <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br /> <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</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>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/FirstPage.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PrevPage.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/NextPage.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/LastPage.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PageSelect.js'</span>;<br /> <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PageSize.js'</span>;<br /><br /> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">simulateFetchRecords</span>(<span class="hljs-params">start, count</span>)</span>{<br /> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {<br /> <span class="hljs-keyword">const</span> newRecords = [];<br /> <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i&lt;count; i++){<br /> newRecords.push(generateContact());<br /> }<br /> setTimeout(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>res(newRecords), <span class="hljs-number">1000</span>);<br /> });<br /> }<br /><br /> <span class="hljs-keyword">const</span> $table = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br /> <br /> $table.setRecords(contacts);<br /> $table.setupFetchRecords(<span class="hljs-number">100</span>, simulateFetchRecords);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
65
+ <k-table
66
+ id="fetchRecordsExample"
67
+ enable-pages="true"
68
+ page-size="10"
69
+ >
70
+ <div class="d-f full">
71
+ <div>
72
+ <k-tc-first-page></k-tc-first-page>
73
+ <k-tc-prev-page></k-tc-prev-page>
74
+ <k-tc-next-page></k-tc-next-page>
75
+ <k-tc-last-page></k-tc-last-page>
76
+ </div>
77
+ <div class="flex"></div>
78
+ <div>
79
+ <k-tc-page-select></k-tc-page-select>
80
+ </div>
81
+ <div class="flex"></div>
82
+ <div>
83
+ <k-tc-page-size></k-tc-page-size>
84
+ </div>
85
+ </div>
86
+ </k-table>
87
+ <script type="module">
88
+ import '../src/components/tableControls/FirstPage.js';
89
+ import '../src/components/tableControls/PrevPage.js';
90
+ import '../src/components/tableControls/NextPage.js';
91
+ import '../src/components/tableControls/LastPage.js';
92
+ import '../src/components/tableControls/PageSelect.js';
93
+ import '../src/components/tableControls/PageSize.js';
94
+
95
+ function simulateFetchRecords(start, count){
96
+ return new Promise(res => {
97
+ const newRecords = [];
98
+ for(let i=0; i<count; i++){
99
+ newRecords.push(generateContact());
100
+ }
101
+ setTimeout(()=>res(newRecords), 1000);
102
+ });
103
+ }
104
+
105
+ const $table = document.getElementById('fetchRecordsExample');
106
+
107
+ $table.setRecords(contacts);
108
+ $table.setupFetchRecords(100, simulateFetchRecords);
109
+ </script>
110
+ </main>
111
+ <div style="height: 33.333vh"></div>
112
+ <script type="module" src="../src/components/Import.js"></script>
113
+ </body>
114
+ </html>
package/docs/components/tableFieldSortHide.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>Field Sort and Hide - 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 - Field Sort and Hide</h1>
58
+ <main>
59
+
60
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
61
+
62
+ <p>This example shows how to use the <code>&lt;k-tc-field-sort-hide&gt;</code> component to allow users to show or hide fields in the table, and sort 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">"fieldVisibilityExample"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-field-sort-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-field-sort-hide</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/FieldSortHide.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">'fieldVisibilityExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
64
+ <k-table id="fieldVisibilityExample">
65
+ <k-tc-field-sort-hide slot="top"></k-tc-field-sort-hide>
66
+ </k-table>
67
+ <script type="module" src="../src/components/tableControls/FieldSortHide.js"></script>
68
+ <script type="module">
69
+ document.getElementById('fieldVisibilityExample').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/tablePagination.html ADDED
@@ -0,0 +1,100 @@
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>Pagination - 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 < 100; 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 - Pagination</h1>
58
+ <main>
59
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
60
+ <p>The table component supports pagination, enable it by adding the <code>enable-pages</code> attribute to the <code>k-table</code> element.</p>
61
+ <p>You can optionally set the page size and page size options by setting the <code>page-size</code> and <code>page-size-options</code> attributes respectively. <code>page-size-options</code> must be in the format of an array of numbers (with brackets).</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">"paginationExample"</span><br /> <span class="hljs-attr">enable-pages</span><br /> <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br /> <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;/<span class="hljs-name">div</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/FirstPage.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/PrevPage.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/NextPage.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/LastPage.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/PageSelect.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/PageSize.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-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">'paginationExample'</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="paginationExample"
65
+ enable-pages
66
+ page-size="10"
67
+ page-size-options="[5,10,25,50]"
68
+ >
69
+ <div class="d-f full" style="align-items: center;">
70
+ <div>
71
+ <k-tc-first-page></k-tc-first-page>
72
+ <k-tc-prev-page></k-tc-prev-page>
73
+ <k-tc-next-page></k-tc-next-page>
74
+ <k-tc-last-page></k-tc-last-page>
75
+ </div>
76
+ <div class="flex"></div>
77
+ <div>
78
+ <k-tc-page-select></k-tc-page-select>
79
+ </div>
80
+ <div class="flex"></div>
81
+ <div>
82
+ <k-tc-page-size></k-tc-page-size>
83
+ </div>
84
+ </div>
85
+ </k-table>
86
+ <script type="module" src="../src/components/tableControls/FirstPage.js"></script>
87
+ <script type="module" src="../src/components/tableControls/PrevPage.js"></script>
88
+ <script type="module" src="../src/components/tableControls/NextPage.js"></script>
89
+ <script type="module" src="../src/components/tableControls/LastPage.js"></script>
90
+ <script type="module" src="../src/components/tableControls/PageSelect.js"></script>
91
+ <script type="module" src="../src/components/tableControls/PageSize.js"></script>
92
+ <script type="module">
93
+ import Table from '../src/components/Table.js';
94
+ document.getElementById('paginationExample').setRecords(contacts);
95
+ </script>
96
+ </main>
97
+ <div style="height: 33.333vh"></div>
98
+ <script type="module" src="../src/components/Import.js"></script>
99
+ </body>
100
+ </html>
package/docs/components/tableRecordEditing.html ADDED
@@ -0,0 +1,144 @@
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 Editing - 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 Editing</h1>
58
+ <main>
59
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
60
+
61
+ <p>The table component supports record editing. To allow for editing add the "edit" control to the "before" or "after" controls. You may define a "type" on the field, which will tell the table to use a specific editor for that field. If you do not define a "type" it will attempt to find the correct type using the value.</p>
62
+ <p>You can also define a custom editor by adding a generator function to the <code>Table.editors</code> object that will generate an input (or select). This will be global to all tables on the page.</p>
63
+ <p>You can also define a custom editor on a per-field basis by adding an "editor" generator function to the field object. This will override the global editor for that field.</p>
64
+ <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">"recordEditingExample"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</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-edit</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/Edit.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-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Table.js'</span>;<br /> Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> $input = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"input"</span>);<br /> $input.value = v;<br /> $input.addEventListener(<span class="hljs-string">'change'</span>, () =&gt; {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/\D/g</span>, <span class="hljs-string">''</span>); <span class="hljs-comment">// Remove all non-digit characters</span><br /> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">7</span>) {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{4})/</span>, <span class="hljs-string">'$1-$2'</span>);<br /> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">10</span>) {<br /> $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{3})(\d{4})/</span>, <span class="hljs-string">'($1) $2-$3'</span>);<br /> } <span class="hljs-keyword">else</span> {<br /> $input.value = v; <span class="hljs-comment">// Reset to default value if not 7 or 10 digits</span><br /> }<br /> });<br /> <span class="hljs-keyword">return</span> $input;<br /> };<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordEditingExample'</span>).setData({<br /> <span class="hljs-attr">records</span>: contacts,<br /> <span class="hljs-attr">fields</span>: [<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"name"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Name"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"email"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Email"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"birthday"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Birthday"</span>,<br /> <span class="hljs-attr">type</span>: <span class="hljs-string">"date"</span>,<br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"phoneNumber"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Phone Number"</span>,<br /> <span class="hljs-attr">type</span>: <span class="hljs-string">"tel"</span><br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"age"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Age"</span>,<br /> <span class="hljs-attr">calculator</span>: <span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br /> <span class="hljs-keyword">const</span> birthDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(record.birthday);<br /> <span class="hljs-keyword">let</span> age = today.getFullYear() - birthDate.getFullYear();<br /> <span class="hljs-keyword">const</span> monthDifference = today.getMonth() - birthDate.getMonth();<br /> <span class="hljs-keyword">if</span> (monthDifference &lt; <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> &amp;&amp; today.getDate() &lt; birthDate.getDate())) {<br /> age--;<br /> }<br /> <span class="hljs-keyword">return</span> age;<br /> }<br /> },<br /> {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">"gender"</span>,<br /> <span class="hljs-attr">label</span>: <span class="hljs-string">"Gender"</span>,<br /> <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> v === <span class="hljs-string">"m"</span> ? <span class="hljs-string">"Male"</span> : <span class="hljs-string">"Female"</span>,<br /> <span class="hljs-attr">editor</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br /> <span class="hljs-keyword">const</span> $select = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"select"</span>);<br /> $select.innerHTML = <span class="hljs-string">`<br /> &lt;option value="m"&gt;Male&lt;/option&gt;<br /> &lt;option value="f"&gt;Female&lt;/option&gt;<br /> `</span>;<br /> $select.value = v;<br /> <span class="hljs-keyword">return</span> $select;<br /> }<br /> }<br /> ]<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
65
+ <k-table
66
+ id="recordEditingExample"
67
+ >
68
+ <k-tc-edit slot="after"></k-tc-edit>
69
+ </k-table>
70
+ <script type="module" src="../src/components/tableControls/Edit.js"></script>
71
+ <script type="module">
72
+ import Table from '../src/components/Table.js';
73
+ Table.editors.tel = (v) => {
74
+ const $input = document.createElement("input");
75
+ $input.value = v;
76
+ $input.addEventListener('change', () => {
77
+ $input.value = $input.value.replace(/\D/g, ''); // Remove all non-digit characters
78
+ if ($input.value.length === 7) {
79
+ $input.value = $input.value.replace(/(\d{3})(\d{4})/, '$1-$2');
80
+ } else if ($input.value.length === 10) {
81
+ $input.value = $input.value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
82
+ } else {
83
+ $input.value = v; // Reset to default value if not 7 or 10 digits
84
+ }
85
+ });
86
+ return $input;
87
+ };
88
+ document.getElementById('recordEditingExample').setData({
89
+ records: contacts,
90
+ fields: [
91
+ {
92
+ name: "name",
93
+ label: "Name"
94
+ },
95
+ {
96
+ name: "email",
97
+ label: "Email"
98
+ },
99
+ {
100
+ name: "birthday",
101
+ label: "Birthday",
102
+ type: "date",
103
+ },
104
+ {
105
+ name: "phoneNumber",
106
+ label: "Phone Number",
107
+ type: "tel"
108
+ },
109
+ {
110
+ name: "age",
111
+ label: "Age",
112
+ calculator: (record) => {
113
+ const today = new Date();
114
+ const birthDate = new Date(record.birthday);
115
+ let age = today.getFullYear() - birthDate.getFullYear();
116
+ const monthDifference = today.getMonth() - birthDate.getMonth();
117
+ if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
118
+ age--;
119
+ }
120
+ return age;
121
+ }
122
+ },
123
+ {
124
+ name: "gender",
125
+ label: "Gender",
126
+ formatter: (v) => v === "m" ? "Male" : "Female",
127
+ editor: (v) => {
128
+ const $select = document.createElement("select");
129
+ $select.innerHTML = `
130
+ <option value="m">Male</option>
131
+ <option value="f">Female</option>
132
+ `;
133
+ $select.value = v;
134
+ return $select;
135
+ }
136
+ }
137
+ ]
138
+ });
139
+ </script>
140
+ </main>
141
+ <div style="height: 33.333vh"></div>
142
+ <script type="module" src="../src/components/Import.js"></script>
143
+ </body>
144
+ </html>
package/docs/components/tableRecordFiltering.html ADDED
@@ -0,0 +1,88 @@
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 Filtering - 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 Filerting</h1>
58
+ <main>
59
+
60
+ <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
61
+
62
+ <p>Record filtering is a feature that allows users to filter the records displayed in the table. The table component provides a filter control that can be used to filter records based on the values in the columns. This control uses a Dialog to display the current filters and allows the user to create filters.</p>
63
+
64
+ <h3>Basic Filtering (Case-Insensitive)</h3>
65
+ <p>By default, filters are case-insensitive. This means that filtering for "smith" will match "Smith", "SMITH", and "smith".</p>
66
+ <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">"recordFilteringExample"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-filters</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/Filters.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">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
67
+ <k-table id="recordFilteringExample">
68
+ <k-tc-filters slot="top"></k-tc-filters>
69
+ </k-table>
70
+ <script type="module" src="../src/components/tableControls/Filters.js"></script>
71
+ <script type="module">
72
+ document.getElementById('recordFilteringExample').setRecords(contacts);
73
+ </script>
74
+
75
+ <h3>Case-Sensitive Filtering</h3>
76
+ <p>You can enable case-sensitive filtering by adding the <code>case-sensitive-filters</code> attribute. With this enabled, filtering for "smith" will only match "smith", not "Smith" or "SMITH".</p>
77
+ <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">"caseSensitiveExample"</span> <span class="hljs-attr">case-sensitive-filters</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-filters</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>&gt;</span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'caseSensitiveExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
78
+ <k-table id="caseSensitiveExample" case-sensitive-filters>
79
+ <k-tc-filters slot="top"></k-tc-filters>
80
+ </k-table>
81
+ <script type="module">
82
+ document.getElementById('caseSensitiveExample').setRecords(contacts);
83
+ </script>
84
+ </main>
85
+ <div style="height: 33.333vh"></div>
86
+ <script type="module" src="../src/components/Import.js"></script>
87
+ </body>
88
+ </html>