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/show-more.html ADDED
@@ -0,0 +1,129 @@
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>Show More - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
+ <script type="module">
10
+ import ShadowComponent from '../src/components/ShadowComponent.js';
11
+ import Import from '../src/components/Import.js';
12
+ import Icon from '../src/components/Icon.js';
13
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
14
+ Import.replacements.root = '../';
15
+ Icon.pathToIcons = ['../icons'];
16
+ </script>
17
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <main>
21
+ <h1 class="ta-center">Show More</h1>
22
+ <details class="b r mb">
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <h6>Examples</h6>
26
+ <a href="#basicUsage">Basic Usage</a><br />
27
+ <a href="#moreLessButtonText">"More" / "Less" Button Text</a><br />
28
+ <a href="#closedHeight">Closed Height</a><br />
29
+
30
+ <h6 class="mt">JavaScript Reference</h6>
31
+ <a href="#constructor">Constructor</a><br />
32
+ <a href="#requirements">Requirements</a><br />
33
+ <a href="#properties">Properties</a><br />
34
+ <a href="#cssCustomProperties">CSS Custom Properties</a><br />
35
+ <a href="#methods">Methods</a><br />
36
+ </div>
37
+ </details>
38
+
39
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
40
+ <div class="row -mx">
41
+ <div class="col m-span-12 px">
42
+ <k-card label="HTML">
43
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-show-more</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
44
+ </k-card>
45
+ </div>
46
+ <div class="col m-span-12 px">
47
+ <k-card label="Output">
48
+ <k-show-more>
49
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
50
+ </k-show-more>
51
+ </k-card>
52
+ </div>
53
+ </div>
54
+
55
+ <h3 id="moreLessButtonText"><a href="#moreLessButtonText" class="no-link">"More" / "Less" Button Text</a></h3>
56
+ <p>Change the text of the show "more" or "less" buttons by creating an element that has a <code>slot</code> attribute of <code>"more"</code> or <code>"less"</code>.</p>
57
+ <div class="row -mx">
58
+ <div class="col m-span-12 px">
59
+ <k-card label="HTML">
60
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-show-more</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"more"</span>&gt;</span>Reveal Details<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"less"</span>&gt;</span>Hide Details<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
61
+ </k-card>
62
+ </div>
63
+ <div class="col m-span-12 px">
64
+ <k-card label="Output">
65
+ <k-show-more>
66
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
67
+ <span slot="more">Reveal Details</span>
68
+ <span slot="less">Hide Details</span>
69
+ </k-show-more>
70
+ </k-card>
71
+ </div>
72
+ </div>
73
+
74
+ <h3 id="closedHeight"><a href="#closedHeight" class="no-link">Closed Height</a></h3>
75
+ <p>Change the height of the closed state by setting the <code>--closed_height</code> CSS Custom Property.</p>
76
+ <div class="row -mx">
77
+ <div class="col m-span-12 px">
78
+ <k-card label="HTML">
79
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-show-more</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"--closed_height: 4rem"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-show-more</span>&gt;</span></code></pre>
80
+ </k-card>
81
+ </div>
82
+ <div class="col m-span-12 px">
83
+ <k-card label="Output">
84
+ <k-show-more
85
+ style="--closed_height: 4rem"
86
+ >
87
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?</p>
88
+ </k-show-more>
89
+ </k-card>
90
+ </div>
91
+ </div>
92
+
93
+ <h2 id="jsRef">JavaScript Reference</h2>
94
+
95
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
96
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
97
+ <h5>
98
+ <code>new ShowMore()</code>
99
+ </h5>
100
+
101
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
102
+ <ul>
103
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
104
+ <li><a href="./icon.html">Icon</a></li>
105
+ </ul>
106
+
107
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
108
+ <h5><code>opened<i>: boolean</i></code></h5>
109
+ <p>Whether the content is expanded. Syncs to <code>opened</code> attribute.</p>
110
+
111
+ <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
112
+ <h5><code>--closed_height</code></h5>
113
+ <p>The height of the content when in the collapsed state. Default is <code>7rem</code>.</p>
114
+
115
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
116
+ <h5><code>more()<i>: void</i></code></h5>
117
+ <p>Expands the content.</p>
118
+ <h5><code>less()<i>: void</i></code></h5>
119
+ <p>Collapses the content.</p>
120
+ <h5><code>toggle()<i>: void</i></code></h5>
121
+ <p>Toggles the content between expanded and collapsed states.</p>
122
+
123
+ </main>
124
+ <div style="height:33vh"></div>
125
+
126
+ <script type="module" src="../src/components/Import.js"></script>
127
+ <script type="module" src="../src/components/ShowMore.js"></script>
128
+ </body>
129
+ </html>
package/docs/components/side-menu.html ADDED
@@ -0,0 +1,159 @@
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>SideMenu - Components - 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" />
10
+ <link rel="stylesheet" href="../styles.css" />
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
+ </head>
18
+ <body>
19
+ <k-import src="../nav.inc.html"></k-import>
20
+ <h1 class="ta-center">SideMenu</h1>
21
+ <main>
22
+ <details class="b r mb">
23
+ <summary class="p">Table of Contents</summary>
24
+ <div class="m mt0 pl">
25
+ <h6>Examples</h6>
26
+ <a href="#basicUsage">Basic Usage</a><br />
27
+ <a href="#closing">Closing</a><br />
28
+ <a href="#rightSideMenu">Right Side Menu</a><br />
29
+
30
+ <h6 class="mt">JavaScript Reference</h6>
31
+ <a href="#constructor">Constructor</a><br />
32
+ <a href="#requirements">Requirements</a><br />
33
+ <a href="#properties">Properties</a><br />
34
+ <a href="#events">Events</a><br />
35
+ <a href="#methods">Methods</a><br />
36
+ </div>
37
+ </details>
38
+
39
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
40
+ <p>Side Menus are closed by default, to open them call the <code>open()</code> method.</p>
41
+ <div class="row -mx">
42
+ <div class="col m-span-12 px">
43
+ <k-card label="HTML">
44
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm1"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Side Menu 1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-menu</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"open-sm1"</span>&gt;</span>Open Side Menu 1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm1'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm1'</span>).open();<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
45
+ </k-card>
46
+ </div>
47
+ <div class="col m-span-12 px">
48
+ <k-card label="Output">
49
+ <k-side-menu id="sm1">
50
+ <p>Side Menu 1</p>
51
+ </k-side-menu>
52
+ <button id="open-sm1">Open Side Menu 1</button>
53
+ <script>
54
+ document.getElementById('open-sm1').addEventListener('click',()=>{
55
+ document.getElementById('sm1').open();
56
+ });
57
+ </script>
58
+ </k-card>
59
+ </div>
60
+ </div>
61
+
62
+ <h3 id="closing"><a href="#closing" class="no-link">Closing</a></h3>
63
+ <p>By default clicking on the overlay (the part that covers the page while the Side Menu is open) will close the Side Menu. Use the <code>overlay-close="false"</code> attribute/value to disable this.</p>
64
+ <p>Use the <code>close()</code> method to close the Side Menu, alternately you can use the <code>toggle()</code> method which can be used to open or close the Side Menu.</p>
65
+ <div class="row -mx">
66
+ <div class="col m-span-12 px">
67
+ <k-card label="HTML">
68
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm2"</span> <span class="hljs-attr">overlay-close</span>=<span class="hljs-string">"false"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Side Menu 2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"close-sm2"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-menu</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"open-sm2"</span>&gt;</span>Open Side Menu 2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">const</span> $sm2 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm2'</span>);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm2'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br /> $sm2.open();<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'close-sm2'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br /> $sm2.close();<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
69
+ </k-card>
70
+ </div>
71
+ <div class="col m-span-12 px">
72
+ <k-card label="Output">
73
+ <k-side-menu id="sm2" overlay-close="false">
74
+ <p>Side Menu 2</p>
75
+ <button id="close-sm2">Close</button>
76
+ </k-side-menu>
77
+ <button id="open-sm2">Open Side Menu 2</button>
78
+ <script>
79
+ const $sm2 = document.getElementById('sm2');
80
+ document.getElementById('open-sm2').addEventListener('click',()=>{
81
+ $sm2.open();
82
+ });
83
+ document.getElementById('close-sm2').addEventListener('click',()=>{
84
+ $sm2.close();
85
+ });
86
+ </script>
87
+ </k-card>
88
+ </div>
89
+ </div>
90
+
91
+ <h3 id="rightSideMenu"><a href="#rightSideMenu" class="no-link">Right Side Menu</a></h3>
92
+ <p>Give the menu the <code>side="right"</code> attribute/value to make it open from the right side.</p>
93
+ <div class="row -mx">
94
+ <div class="col m-span-12 px">
95
+ <k-card label="HTML">
96
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-side-menu</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sm3"</span> <span class="hljs-attr">side</span>=<span class="hljs-string">"right"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Side Menu 3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-side-menu</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"open-sm3"</span>&gt;</span>Open Side Menu 3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'open-sm3'</span>).addEventListener(<span class="hljs-string">'click'</span>,()=&gt;{<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sm3'</span>).open();<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
97
+ </k-card>
98
+ </div>
99
+ <div class="col m-span-12 px">
100
+ <k-card label="Output">
101
+ <k-side-menu id="sm3" side="right">
102
+ <p>Side Menu 3</p>
103
+ </k-side-menu>
104
+ <button id="open-sm3">Open Side Menu 3</button>
105
+ <script>
106
+ document.getElementById('open-sm3').addEventListener('click',()=>{
107
+ document.getElementById('sm3').open();
108
+ });
109
+ </script>
110
+ </k-card>
111
+ </div>
112
+ </div>
113
+
114
+ <h2 id="jsRef">JavaScript Reference</h2>
115
+
116
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
117
+ <h6>Extends <a href="./shadowcomponent.html">ShadowComponent</a></h6>
118
+ <h5>
119
+ <code>new SideMenu()</code>
120
+ </h5>
121
+
122
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
123
+ <ul>
124
+ <li><a href="./shadowcomponent.html">ShadowComponent</a></li>
125
+ <li><a href="./focuscapture.html">FocusCapture</a></li>
126
+ </ul>
127
+
128
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
129
+ <h5><code>opened<i>: boolean</i></code></h5>
130
+ <p>Whether the side menu is opened. Defaults to <code>false</code>. Syncs to <code>opened</code> attribute.</p>
131
+ <h5><code>overlayClose<i>: boolean</i></code></h5>
132
+ <p>Whether clicking the overlay closes the side menu. Defaults to <code>true</code>. Syncs to <code>overlay-close</code> attribute.</p>
133
+ <h5><code>side<i>: string</i></code></h5>
134
+ <p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>. Syncs to <code>side</code> attribute.</p>
135
+
136
+ <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
137
+ <h5><code>open</code></h5>
138
+ <p>Dispatched when the side menu is opened.</p>
139
+ <h5><code>close</code></h5>
140
+ <p>Dispatched when the side menu is closed.</p>
141
+ <h5><code>change</code></h5>
142
+ <p>Dispatched when the side menu state changes. Event detail contains "open" or "close".</p>
143
+ <h5><code>toggle</code></h5>
144
+ <p>Dispatched when the toggle method is called.</p>
145
+
146
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
147
+ <h5><code>open()<i>: void</i></code></h5>
148
+ <p>Opens the side menu.</p>
149
+ <h5><code>close()<i>: void</i></code></h5>
150
+ <p>Closes the side menu.</p>
151
+ <h5><code>toggle()<i>: void</i></code></h5>
152
+ <p>Toggles the side menu open or closed and dispatches a toggle event.</p>
153
+
154
+ </main>
155
+ <div style="height:33vh"></div>
156
+ <script type="module" src="../src/components/Import.js"></script>
157
+ <script type="module" src="../src/components/SideMenu.js"></script>
158
+ </body>
159
+ </html>
package/docs/components/split.html ADDED
@@ -0,0 +1,147 @@
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>Split - Components - Kempo Docs - A Web Components Solution</title>
7
+ <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
9
+ <script type="module">
10
+ import Import from '../src/components/Import.js';
11
+ import Icon from '../src/components/Icon.js';
12
+ Import.replacements.root = '../';
13
+ Icon.pathToIcons = ['../icons'];
14
+ </script>
15
+ </head>
16
+ <body>
17
+ <k-import src="../nav.inc.html"></k-import>
18
+ <h1 class="ta-center">Split</h1>
19
+ <main>
20
+ <details class="b r mb">
21
+ <summary class="p">Table of Contents</summary>
22
+ <div class="m mt0 pl">
23
+ <h6>Examples</h6>
24
+ <a href="#basicUsage">Basic Usage</a><br />
25
+ <a href="#resizing">Resizing</a><br />
26
+
27
+ <h6 class="mt">JavaScript Reference</h6>
28
+ <a href="#constructor">Constructor</a><br />
29
+ <a href="#requirements">Requirements</a><br />
30
+ <a href="#properties">Properties</a><br />
31
+ <a href="#cssCustomProperties">CSS Custom Properties</a><br />
32
+ <a href="#methods">Methods</a><br />
33
+ <a href="#events">Events</a><br />
34
+ </div>
35
+ </details>
36
+
37
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
38
+ <p>Create a split view using the <code>k-split</code> component. Add content to the left pane by placing it inside the component, and add content to the right pane by using the <code>slot="right"</code> attribute.</p>
39
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
40
+ <k-split style="height: 10rem" class="b">
41
+ <div>Left Pane Content</div>
42
+ <div slot="right">Right Pane Content</div>
43
+ </k-split>
44
+
45
+ <h3 id="resizing"><a href="#resizing" class="no-link">Resizing</a></h3>
46
+ <p>The split view can be resized by dragging the divider handle. The initial width of the left pane can be set using the <code>--left_width</code> CSS custom property.</p>
47
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"--left_width: 30%; height: 10rem"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
48
+ <k-split style="--left_width: 30%; height: 10rem" class="b">
49
+ <div>Left Pane Content</div>
50
+ <div slot="right">Right Pane Content</div>
51
+ </k-split>
52
+
53
+ <h3>Sizes</h3>
54
+ <p>Set the CSS Custom Property <code>--left_width</code> to set the initial size.</p>
55
+ <p>Set the CSS Custom Property <code>--min_pane_width</code> to set the minimum size each side can be.</p>
56
+ <p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the sides).</p>
57
+ <div class="row -mx">
58
+ <div class="col m-span-12 px">
59
+ <k-card label="HTML">
60
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span><br /> <span class="hljs-attr">style</span>=<span class="hljs-string">"<br /> --left_width: 100px;<br /> --min_pane_width: 100px;<br /> --handle_width: 20px;<br /> height: 10rem<br /> "</span><br /> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span><br />&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>left<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>right<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
61
+ </k-card>
62
+ </div>
63
+ <div class="col m-span-12 px">
64
+ <k-card label="Output">
65
+ <k-split
66
+ style="
67
+ --left_width: 100px;
68
+ --min_pane_width: 100px;
69
+ --handle_width: 20px;
70
+ height: 10rem
71
+ "
72
+ class="b"
73
+ >
74
+ <p>left</p>
75
+ <p slot="right">right</p>
76
+ </k-split>
77
+ </k-card>
78
+ </div>
79
+ </div>
80
+
81
+ <h3 id="stacking"><a href="#stacking" class="no-link">Stacking</a></h3>
82
+ <p>When the screen size is small (mobile) a split panel may not make sense, rather than changing the markup set the <code>stack-width</code> attribute to stack the contents (disable split view) when the window size is less than the provided size.</p>
83
+ <div class="row -mx">
84
+ <div class="col m-span-12 px">
85
+ <k-card label="HTML">
86
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-split</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 10rem"</span> <span class="hljs-attr">stack-width</span>=<span class="hljs-string">"1080"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Left Pane Content<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">slot</span>=<span class="hljs-string">"right"</span>&gt;</span>Right Pane Content<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-split</span>&gt;</span></code></pre>
87
+ </k-card>
88
+ </div>
89
+ <div class="col m-span-12 px">
90
+ <k-card label="Output">
91
+ <k-split style="height: 10rem" stack-width="1080">
92
+ <div>Left Pane Content</div>
93
+ <div slot="right">Right Pane Content</div>
94
+ </k-split>
95
+ </k-card>
96
+ </div>
97
+ </div>
98
+
99
+
100
+ <h2 id="jsRef">JavaScript Reference</h2>
101
+
102
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
103
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
104
+ <h5>
105
+ <code>new Split()</code>
106
+ </h5>
107
+
108
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
109
+ <ul>
110
+ <li><a href="./shadow-component.html">ShadowComponent</a></li>
111
+ </ul>
112
+
113
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
114
+ <h5><code>resizing<i>: boolean</i></code></h5>
115
+ <p>Whether the split view is currently being resized. Syncs to <code>resizing</code> attribute.</p>
116
+ <h5><code>stacked<i>: boolean</i></code></h5>
117
+ <p>Whether the split view is in stacked mode. Syncs to <code>stacked</code> attribute.</p>
118
+ <h5><code>stackWidth<i>: number</i></code></h5>
119
+ <p>The window width threshold for stacking behavior. Syncs to <code>stack-width</code> attribute.</p>
120
+
121
+ <h3 id="cssCustomProperties"><a href="#cssCustomProperties" class="no-link">CSS Custom Properties</a></h3>
122
+ <h5><code>--left_width</code></h5>
123
+ <p>The width of the left pane. Default is <code>calc((100% - var(--handle_width)) / 2)</code>.</p>
124
+ <h5><code>--handle_width</code></h5>
125
+ <p>The width of the draggable divider handle. Default is <code>0.5rem</code>.</p>
126
+ <h5><code>--min_pane_width</code></h5>
127
+ <p>The minimum width each pane can be resized to. Default is <code>6rem</code>.</p>
128
+
129
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
130
+ <h5><code>setSize(size)<i>: void</i></code></h5>
131
+ <p>Sets the width of the left pane.</p>
132
+
133
+ <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
134
+ <h5><code>resizestart</code></h5>
135
+ <p>Fired when the user starts dragging the divider handle. Detail contains <code>{ startSize }</code>.</p>
136
+ <h5><code>resize</code></h5>
137
+ <p>Fired during dragging of the divider handle. Detail contains <code>{ size }</code>.</p>
138
+ <h5><code>resizeend</code></h5>
139
+ <p>Fired when the user stops dragging the divider handle. Detail contains <code>{ size }</code>.</p>
140
+
141
+ </main>
142
+ <div style="height:33vh"></div>
143
+ <script type="module" src="../src/components/Import.js"></script>
144
+ <script type="module" src="../src/components/Card.js"></script>
145
+ <script type="module" src="../src/components/Split.js"></script>
146
+ </body>
147
+ </html>