kempo-ui 0.0.2 → 0.0.3

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 (193) hide show
  1. package/.github/copilot-instructions.md +149 -149
  2. package/.github/workflows/publish-npm.yml +44 -44
  3. package/CONTRIBUTING.md +149 -149
  4. package/README.md +0 -0
  5. package/dist/kempo-vars.css +0 -0
  6. package/dist/src/components/FocusCapture.js +7 -0
  7. package/dist/src/components/Icon.js +10 -0
  8. package/dist/src/components/Import.js +1 -0
  9. package/dist/src/components/ShadowComponent.js +1 -0
  10. package/dist/src/components/SideMenu.js +97 -0
  11. package/dist/src/lit-all.min.js +120 -0
  12. package/docs/components/accordion.html +122 -0
  13. package/docs/components/card.html +91 -0
  14. package/docs/components/component.html +90 -0
  15. package/docs/components/content-slider.html +193 -0
  16. package/docs/components/dialog.html +245 -0
  17. package/docs/components/directory-viewer.html +90 -0
  18. package/docs/components/focus-capture.html +68 -0
  19. package/docs/components/icon.html +161 -0
  20. package/docs/components/import.html +78 -0
  21. package/docs/components/lazy-component.html +84 -0
  22. package/docs/components/reactive-component.html +69 -0
  23. package/docs/components/reactive-lazy-component.html +69 -0
  24. package/docs/components/resize.html +152 -0
  25. package/docs/components/search.html +102 -0
  26. package/docs/components/show-more.html +123 -0
  27. package/docs/components/side-menu.html +168 -0
  28. package/docs/components/sortable.html +96 -0
  29. package/docs/components/split.html +126 -0
  30. package/docs/components/table.html +312 -0
  31. package/docs/components/tableControls.html +77 -0
  32. package/docs/components/tableCustomFields.html +113 -0
  33. package/docs/components/tableFetchRecords.html +114 -0
  34. package/docs/components/tableFieldSortHide.html +75 -0
  35. package/docs/components/tablePagination.html +100 -0
  36. package/docs/components/tableRecordEditing.html +144 -0
  37. package/docs/components/tableRecordFiltering.html +75 -0
  38. package/docs/components/tableRecordHiding.html +80 -0
  39. package/docs/components/tableRecordSearching.html +75 -0
  40. package/docs/components/tableRecordSelection.html +75 -0
  41. package/docs/components/tableRowControls.html +78 -0
  42. package/docs/components/tableSorting.html +73 -0
  43. package/docs/components/tabs.html +163 -0
  44. package/docs/components/tags.html +94 -0
  45. package/docs/components/theme-switcher.html +129 -0
  46. package/docs/components/timestamp.html +86 -0
  47. package/docs/components/toast.html +328 -0
  48. package/docs/components/toggle.html +155 -0
  49. package/docs/dev.config.json +20 -0
  50. package/docs/icons/add.svg +1 -0
  51. package/docs/icons/arrow-back.svg +1 -0
  52. package/docs/icons/arrow-down-double.svg +1 -0
  53. package/docs/icons/arrow-down.svg +1 -0
  54. package/docs/icons/arrow-forward.svg +1 -0
  55. package/docs/icons/arrow-up-double.svg +1 -0
  56. package/docs/icons/arrow-up.svg +1 -0
  57. package/docs/icons/cards.svg +1 -0
  58. package/docs/icons/check.svg +1 -0
  59. package/docs/icons/chevron-left.svg +1 -0
  60. package/docs/icons/chevron-right.svg +1 -0
  61. package/docs/icons/close.svg +2 -0
  62. package/docs/icons/compare.svg +1 -0
  63. package/docs/icons/delete.svg +1 -0
  64. package/docs/icons/drag-handle.svg +1 -0
  65. package/docs/icons/drawing2.svg +124 -0
  66. package/docs/icons/edit.svg +1 -0
  67. package/docs/icons/error.svg +1 -0
  68. package/docs/icons/export-file.svg +1 -0
  69. package/docs/icons/file-text.svg +1 -0
  70. package/docs/icons/file.svg +1 -0
  71. package/docs/icons/filter-off.svg +1 -0
  72. package/docs/icons/filter.svg +1 -0
  73. package/docs/icons/first.svg +1 -0
  74. package/docs/icons/folder-clear.svg +1 -0
  75. package/docs/icons/folder-create.svg +1 -0
  76. package/docs/icons/folder-open.svg +1 -0
  77. package/docs/icons/folder.svg +1 -0
  78. package/docs/icons/hide.svg +1 -0
  79. package/docs/icons/image.svg +1 -0
  80. package/docs/icons/label-add.svg +1 -0
  81. package/docs/icons/label.svg +1 -0
  82. package/docs/icons/last.svg +1 -0
  83. package/docs/icons/menu.svg +1 -0
  84. package/docs/icons/mode-auto.svg +1 -0
  85. package/docs/icons/mode-dark.svg +1 -0
  86. package/docs/icons/mode-light.svg +1 -0
  87. package/docs/icons/open-in-browser.svg +1 -0
  88. package/docs/icons/pause.svg +1 -0
  89. package/docs/icons/play.svg +1 -0
  90. package/docs/icons/refresh.svg +1 -0
  91. package/docs/icons/remove.svg +1 -0
  92. package/docs/icons/save.svg +1 -0
  93. package/docs/icons/search.svg +1 -0
  94. package/docs/icons/settings.svg +1 -0
  95. package/docs/icons/show.svg +1 -0
  96. package/docs/icons/storage.svg +1 -0
  97. package/docs/icons/table-visibility.svg +1 -0
  98. package/docs/icons/tag.svg +1 -0
  99. package/docs/icons/tools.svg +1 -0
  100. package/docs/icons/trash-x.svg +1 -0
  101. package/docs/icons/warning.svg +1 -0
  102. package/docs/index.html +28 -21
  103. package/docs/nav.inc.html +73 -0
  104. package/docs/nav.inc.js +4 -0
  105. package/{config/production.json → docs/prod.config.json} +20 -16
  106. package/docs/src/components/FocusCapture.js +7 -0
  107. package/docs/src/components/HybridComponent.js +1 -0
  108. package/docs/src/components/Icon.js +10 -0
  109. package/docs/src/components/Import.js +1 -0
  110. package/docs/src/components/LightComponent.js +1 -0
  111. package/docs/src/components/ShadowComponent.js +1 -0
  112. package/docs/src/components/SideMenu.js +97 -0
  113. package/docs/src/lit-all.min.js +120 -0
  114. package/docs/src/utils/cli.js +1 -0
  115. package/docs/src/utils/fs-utils.js +1 -0
  116. package/docs/styles.css +6 -0
  117. package/icons/add.svg +1 -0
  118. package/icons/arrow-back.svg +1 -0
  119. package/icons/arrow-down-double.svg +1 -0
  120. package/icons/arrow-down.svg +1 -0
  121. package/icons/arrow-forward.svg +1 -0
  122. package/icons/arrow-up-double.svg +1 -0
  123. package/icons/arrow-up.svg +1 -0
  124. package/icons/cards.svg +1 -0
  125. package/icons/check.svg +1 -0
  126. package/icons/chevron-left.svg +1 -0
  127. package/icons/chevron-right.svg +1 -0
  128. package/icons/close.svg +2 -0
  129. package/icons/compare.svg +1 -0
  130. package/icons/delete.svg +1 -0
  131. package/icons/drag-handle.svg +1 -0
  132. package/icons/drawing2.svg +124 -0
  133. package/icons/edit.svg +1 -0
  134. package/icons/error.svg +1 -0
  135. package/icons/export-file.svg +1 -0
  136. package/icons/file-text.svg +1 -0
  137. package/icons/file.svg +1 -0
  138. package/icons/filter-off.svg +1 -0
  139. package/icons/filter.svg +1 -0
  140. package/icons/first.svg +1 -0
  141. package/icons/folder-clear.svg +1 -0
  142. package/icons/folder-create.svg +1 -0
  143. package/icons/folder-open.svg +1 -0
  144. package/icons/folder.svg +1 -0
  145. package/icons/hide.svg +1 -0
  146. package/icons/image.svg +1 -0
  147. package/icons/label-add.svg +1 -0
  148. package/icons/label.svg +1 -0
  149. package/icons/last.svg +1 -0
  150. package/icons/menu.svg +1 -0
  151. package/icons/mode-auto.svg +1 -0
  152. package/icons/mode-dark.svg +1 -0
  153. package/icons/mode-light.svg +1 -0
  154. package/icons/open-in-browser.svg +1 -0
  155. package/icons/pause.svg +1 -0
  156. package/icons/play.svg +1 -0
  157. package/icons/refresh.svg +1 -0
  158. package/icons/remove.svg +1 -0
  159. package/icons/save.svg +1 -0
  160. package/icons/search.svg +1 -0
  161. package/icons/settings.svg +1 -0
  162. package/icons/show.svg +1 -0
  163. package/icons/storage.svg +1 -0
  164. package/icons/table-visibility.svg +1 -0
  165. package/icons/tag.svg +1 -0
  166. package/icons/tools.svg +1 -0
  167. package/icons/trash-x.svg +1 -0
  168. package/icons/warning.svg +1 -0
  169. package/package.json +2 -2
  170. package/scripts/build.js +109 -138
  171. package/scripts/docs.js +60 -60
  172. package/src/components/Card.js +66 -0
  173. package/src/components/FocusCapture.js +23 -0
  174. package/src/components/HybridComponent.js +40 -40
  175. package/src/components/Icon.js +155 -0
  176. package/src/components/Import.js +104 -0
  177. package/src/components/LightComponent.js +32 -32
  178. package/src/components/ShadowComponent.js +30 -17
  179. package/src/components/SideMenu.js +167 -0
  180. package/src/components/ThemeSwitcher.js +108 -0
  181. package/src/kempo-hljs.css +146 -0
  182. package/src/utils/cli.js +43 -43
  183. package/src/utils/fs-utils.js +41 -41
  184. package/src/utils/propConverters.js +11 -0
  185. package/tests/HybridComponent.browser-test.js +214 -214
  186. package/tests/LightComponent.browser-test.js +169 -169
  187. package/tests/ShadowComponent.browser-test.js +130 -130
  188. package/config/development.json +0 -14
  189. package/docs/components/ShadowComponent.js +0 -1
  190. /package/{docs → dist/src}/components/HybridComponent.js +0 -0
  191. /package/{docs → dist/src}/components/LightComponent.js +0 -0
  192. /package/{docs → dist/src}/utils/cli.js +0 -0
  193. /package/{docs → dist/src}/utils/fs-utils.js +0 -0
package/docs/components/show-more.html ADDED
@@ -0,0 +1,123 @@
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 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
+ <main>
19
+ <h1 class="ta-center">Show More</h1>
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="#moreLessButtonText">"More" / "Less" Button Text</a><br />
26
+ <a href="#closedHeight">Closed Height</a><br />
27
+
28
+ <h6 class="mt">JavaScript Reference</h6>
29
+ <a href="#constructor">Constructor</a><br />
30
+ <a href="#requirements">Requirements</a><br />
31
+ <a href="#attributes">Attributes</a><br />
32
+ <a href="#properties">Properties</a><br />
33
+ <a href="#methods">Methods</a><br />
34
+ </div>
35
+ </details>
36
+
37
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
38
+ <div class="row -mx">
39
+ <div class="col m-span-12 px">
40
+ <k-card label="HTML">
41
+ <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>
42
+ </k-card>
43
+ </div>
44
+ <div class="col m-span-12 px">
45
+ <k-card label="Output">
46
+ <k-show-more>
47
+ <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>
48
+ </k-show-more>
49
+ </k-card>
50
+ </div>
51
+ </div>
52
+
53
+ <h3 id="moreLessButtonText"><a href="#moreLessButtonText" class="no-link">"More" / "Less" Button Text</a></h3>
54
+ <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>
55
+ <div class="row -mx">
56
+ <div class="col m-span-12 px">
57
+ <k-card label="HTML">
58
+ <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>
59
+ </k-card>
60
+ </div>
61
+ <div class="col m-span-12 px">
62
+ <k-card label="Output">
63
+ <k-show-more>
64
+ <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>
65
+ <span slot="more">Reveal Details</span>
66
+ <span slot="less">Hide Details</span>
67
+ </k-show-more>
68
+ </k-card>
69
+ </div>
70
+ </div>
71
+
72
+ <h3 id="closedHeight"><a href="#closedHeight" class="no-link">Closed Height</a></h3>
73
+ <p>Change the height of the closed state by setting the <code>--closed_height</code> CSS Custom Property.</p>
74
+ <div class="row -mx">
75
+ <div class="col m-span-12 px">
76
+ <k-card label="HTML">
77
+ <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>
78
+ </k-card>
79
+ </div>
80
+ <div class="col m-span-12 px">
81
+ <k-card label="Output">
82
+ <k-show-more
83
+ style="--closed_height: 4rem"
84
+ >
85
+ <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>
86
+ </k-show-more>
87
+ </k-card>
88
+ </div>
89
+ </div>
90
+
91
+ <h2 id="jsRef">JavaScript Reference</h2>
92
+
93
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
94
+ <h6>Extends <a href="./component.html">LazyComponent</a></h6>
95
+ <h5>
96
+ <code>new ShowMore()</code>
97
+ </h5>
98
+
99
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
100
+ <ul>
101
+ <li><a href="./component.html">Component</a></li>
102
+ <li><a href="./lazy-component.html">LazyComponent</a></li>
103
+ </ul>
104
+
105
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
106
+ <h5><code>opened<i>: boolean</i></code></h5>
107
+ <p>Whether the content is expanded.</p>
108
+
109
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
110
+ <h5><code>more()<i>: void</i></code></h5>
111
+ <p>Expands the content.</p>
112
+ <h5><code>less()<i>: void</i></code></h5>
113
+ <p>Collapses the content.</p>
114
+ <h5><code>toggle()<i>: void</i></code></h5>
115
+ <p>Toggles the content between expanded and collapsed states.</p>
116
+
117
+ </main>
118
+ <div style="height:33vh"></div>
119
+
120
+ <script type="module" src="../src/components/Import.js"></script>
121
+ <script type="module" src="../src/components/ShowMore.js"></script>
122
+ </body>
123
+ </html>
package/docs/components/side-menu.html ADDED
@@ -0,0 +1,168 @@
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="#attributes">Attributes</a><br />
34
+ <a href="#properties">Properties</a><br />
35
+ <a href="#events">Events</a><br />
36
+ <a href="#methods">Methods</a><br />
37
+ </div>
38
+ </details>
39
+
40
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
41
+ <p>Side Menus are closed by default, to open them call the <code>open()</code> method.</p>
42
+ <div class="row -mx">
43
+ <div class="col m-span-12 px">
44
+ <k-card label="HTML">
45
+ <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>
46
+ </k-card>
47
+ </div>
48
+ <div class="col m-span-12 px">
49
+ <k-card label="Output">
50
+ <k-side-menu id="sm1">
51
+ <p>Side Menu 1</p>
52
+ </k-side-menu>
53
+ <button id="open-sm1">Open Side Menu 1</button>
54
+ <script>
55
+ document.getElementById('open-sm1').addEventListener('click',()=>{
56
+ document.getElementById('sm1').open();
57
+ });
58
+ </script>
59
+ </k-card>
60
+ </div>
61
+ </div>
62
+
63
+ <h3 id="closing"><a href="#closing" class="no-link">Closing</a></h3>
64
+ <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>
65
+ <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>
66
+ <div class="row -mx">
67
+ <div class="col m-span-12 px">
68
+ <k-card label="HTML">
69
+ <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>
70
+ </k-card>
71
+ </div>
72
+ <div class="col m-span-12 px">
73
+ <k-card label="Output">
74
+ <k-side-menu id="sm2" overlay-close="false">
75
+ <p>Side Menu 2</p>
76
+ <button id="close-sm2">Close</button>
77
+ </k-side-menu>
78
+ <button id="open-sm2">Open Side Menu 2</button>
79
+ <script>
80
+ const $sm2 = document.getElementById('sm2');
81
+ document.getElementById('open-sm2').addEventListener('click',()=>{
82
+ $sm2.open();
83
+ });
84
+ document.getElementById('close-sm2').addEventListener('click',()=>{
85
+ $sm2.close();
86
+ });
87
+ </script>
88
+ </k-card>
89
+ </div>
90
+ </div>
91
+
92
+ <h3 id="rightSideMenu"><a href="#rightSideMenu" class="no-link">Right Side Menu</a></h3>
93
+ <p>Give the menu the <code>side="right"</code> attribute/value to make it open from the right side.</p>
94
+ <div class="row -mx">
95
+ <div class="col m-span-12 px">
96
+ <k-card label="HTML">
97
+ <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>
98
+ </k-card>
99
+ </div>
100
+ <div class="col m-span-12 px">
101
+ <k-card label="Output">
102
+ <k-side-menu id="sm3" side="right">
103
+ <p>Side Menu 3</p>
104
+ </k-side-menu>
105
+ <button id="open-sm3">Open Side Menu 3</button>
106
+ <script>
107
+ document.getElementById('open-sm3').addEventListener('click',()=>{
108
+ document.getElementById('sm3').open();
109
+ });
110
+ </script>
111
+ </k-card>
112
+ </div>
113
+ </div>
114
+
115
+ <h2 id="jsRef">JavaScript Reference</h2>
116
+
117
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
118
+ <h6>Extends <a href="./shadowcomponent.html">ShadowComponent</a></h6>
119
+ <h5>
120
+ <code>new SideMenu()</code>
121
+ </h5>
122
+
123
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
124
+ <ul>
125
+ <li><a href="./shadowcomponent.html">ShadowComponent</a></li>
126
+ <li><a href="./focuscapture.html">FocusCapture</a></li>
127
+ </ul>
128
+
129
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
130
+ <h5><code>opened<i>: boolean</i></code></h5>
131
+ <p>Whether the side menu is opened.</p>
132
+ <h5><code>overlay-close<i>: string</i></code></h5>
133
+ <p>Whether clicking the overlay closes the side menu. Accepts "true" or "false" as string values. Defaults to "true".</p>
134
+ <h5><code>side<i>: string</i></code></h5>
135
+ <p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to "left".</p>
136
+
137
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
138
+ <h5><code>opened<i>: boolean</i></code></h5>
139
+ <p>Whether the side menu is opened. Defaults to <code>false</code>.</p>
140
+ <h5><code>overlayClose<i>: boolean</i></code></h5>
141
+ <p>Whether clicking the overlay closes the side menu. Defaults to <code>true</code>.</p>
142
+ <h5><code>side<i>: string</i></code></h5>
143
+ <p>The side from which the menu opens. Can be <code>"left"</code> or <code>"right"</code>. Defaults to <code>"left"</code>.</p>
144
+
145
+ <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
146
+ <h5><code>open</code></h5>
147
+ <p>Dispatched when the side menu is opened.</p>
148
+ <h5><code>close</code></h5>
149
+ <p>Dispatched when the side menu is closed.</p>
150
+ <h5><code>change</code></h5>
151
+ <p>Dispatched when the side menu state changes. Event detail contains "open" or "close".</p>
152
+ <h5><code>toggle</code></h5>
153
+ <p>Dispatched when the toggle method is called.</p>
154
+
155
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
156
+ <h5><code>open()<i>: void</i></code></h5>
157
+ <p>Opens the side menu.</p>
158
+ <h5><code>close()<i>: void</i></code></h5>
159
+ <p>Closes the side menu.</p>
160
+ <h5><code>toggle()<i>: void</i></code></h5>
161
+ <p>Toggles the side menu open or closed and dispatches a toggle event.</p>
162
+
163
+ </main>
164
+ <div style="height:33vh"></div>
165
+ <script type="module" src="../src/components/Import.js"></script>
166
+ <script type="module" src="../src/components/SideMenu.js"></script>
167
+ </body>
168
+ </html>
package/docs/components/sortable.html ADDED
@@ -0,0 +1,96 @@
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>Sortable - 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">Sortable</h1>
19
+ <main>
20
+ <details
21
+ class="b r mb"
22
+ >
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
+
28
+ <h6 class="mt">
29
+ <a href="#sortable">Sortable JavaScript Reference</a>
30
+ </h6>
31
+ <a href="#sortableConstructor">Constructor</a><br />
32
+ <a href="#sortableRequirements">Requirements</a><br />
33
+ <a href="#sortableAttributes">Attributes</a>
34
+
35
+ <h6 class="mt">
36
+ <a href="#sortableItem">SortableItem JavaScript Reference</a>
37
+ </h6>
38
+ <a href="#sortableItemConstructor">Constructor</a><br />
39
+ <a href="#sortableItemAttributes">Attributes</a>
40
+ </div>
41
+ </details>
42
+
43
+ <h3>Description</h3>
44
+ <p>A component that allows the user to sort items in a list.</p>
45
+
46
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
47
+
48
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-sortable</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 4<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 5<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable</span>&gt;</span></code></pre>
49
+ <k-sortable>
50
+ <k-sortable-item>Item 1</k-sortable-item>
51
+ <k-sortable-item>Item 2</k-sortable-item>
52
+ <k-sortable-item>Item 3</k-sortable-item>
53
+ <k-sortable-item>Item 4</k-sortable-item>
54
+ <k-sortable-item>Item 5</k-sortable-item>
55
+ </k-sortable>
56
+
57
+ <br />
58
+ <hr />
59
+
60
+ <h2 id="sortable">Sortable JavaScript Reference</h2>
61
+
62
+ <h3 id="sortableConstructor"><a href="#sortableConstructor" class="no-link">Constructor</a></h3>
63
+ <h6>Extends <a href="./component.html">Component</a></h6>
64
+ <h5>
65
+ <code>new Sortable()</code>
66
+ </h5>
67
+
68
+ <h3 id="sortableRequirements"><a href="#sortableRequirements" class="no-link">Requirements</a></h3>
69
+ <ul>
70
+ <li>Sortable items must be direct children of the Sortable component.</li>
71
+ </ul>
72
+
73
+ <h3 id="sortableAttributes"><a href="#sortableAttributes" class="no-link">Attributes</a></h3>
74
+ <h5><code>sorting: boolean</code></h5>
75
+ <p>Indicates whether the item is currently being sorted.</p>
76
+
77
+
78
+ <br />
79
+ <hr />
80
+ <h2 id="sortableItem">SortableItem JavaScript Reference</h2>
81
+
82
+ <h3 id="sortableItemConstructor"><a href="#sortableItemConstructor" class="no-link">Constructor</a></h3>
83
+ <h6>Extends <a href="./component.html">Component</a></h6>
84
+ <h5>
85
+ <code>new SortableItem()</code>
86
+ </h5>
87
+
88
+ <h3 id="sortableItemAttributes"><a href="#sortableItemAttributes" class="no-link">Attributes</a></h3>
89
+ <h5><code>sorting: boolean</code></h5>
90
+ <p>Indicates whether the item is currently being sorted.</p>
91
+
92
+ </main>
93
+ <script type="module" src="../src/components/Import.js"></script>
94
+ <script type="module" src="../src/components/Sortable.js"></script>
95
+ </body>
96
+ </html>
package/docs/components/split.html ADDED
@@ -0,0 +1,126 @@
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="#attributes">Attributes</a><br />
31
+ <a href="#properties">Properties</a><br />
32
+ <a href="#methods">Methods</a><br />
33
+ </div>
34
+ </details>
35
+
36
+ <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
37
+ <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>
38
+ <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>
39
+ <k-split style="height: 10rem" class="b">
40
+ <div>Left Pane Content</div>
41
+ <div slot="right">Right Pane Content</div>
42
+ </k-split>
43
+
44
+ <h3 id="resizing"><a href="#resizing" class="no-link">Resizing</a></h3>
45
+ <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>
46
+ <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>
47
+ <k-split style="--left_width: 30%; height: 10rem" class="b">
48
+ <div>Left Pane Content</div>
49
+ <div slot="right">Right Pane Content</div>
50
+ </k-split>
51
+
52
+ <h3>Sizes</h3>
53
+ <p>Set the CSS Custom Property <code>--left_width</code> to set the initial size.</p>
54
+ <p>Set the CSS Custom Property <code>--min_pane_width</code> to set the minimum size each side can be.</p>
55
+ <p>Set the CSS Custom Property <code>--handle_width</code> to set the size of the handle (the draggable region between the sides).</p>
56
+ <div class="row -mx">
57
+ <div class="col m-span-12 px">
58
+ <k-card label="HTML">
59
+ <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>
60
+ </k-card>
61
+ </div>
62
+ <div class="col m-span-12 px">
63
+ <k-card label="Output">
64
+ <k-split
65
+ style="
66
+ --left_width: 100px;
67
+ --min_pane_width: 100px;
68
+ --handle_width: 20px;
69
+ height: 10rem
70
+ "
71
+ class="b"
72
+ >
73
+ <p>left</p>
74
+ <p slot="right">right</p>
75
+ </k-split>
76
+ </k-card>
77
+ </div>
78
+ </div>
79
+
80
+ <h3 id="stacking"><a href="#stacking" class="no-link">Stacking</a></h3>
81
+ <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>
82
+ <div class="row -mx">
83
+ <div class="col m-span-12 px">
84
+ <k-card label="HTML">
85
+ <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>
86
+ </k-card>
87
+ </div>
88
+ <div class="col m-span-12 px">
89
+ <k-card label="Output">
90
+ <k-split style="height: 10rem" stack-width="1080">
91
+ <div>Left Pane Content</div>
92
+ <div slot="right">Right Pane Content</div>
93
+ </k-split>
94
+ </k-card>
95
+ </div>
96
+ </div>
97
+
98
+
99
+ <h2 id="jsRef">JavaScript Reference</h2>
100
+
101
+ <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
102
+ <h6>Extends <a href="./component.html">Component</a></h6>
103
+ <h5>
104
+ <code>new Split()</code>
105
+ </h5>
106
+
107
+ <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
108
+ <ul>
109
+ <li><a href="./component.html">Component</a></li>
110
+ </ul>
111
+
112
+ <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
113
+ <h5><code>resizing<i>: boolean</i></code></h5>
114
+ <p>Indicates whether the split view is currently being resized.</p>
115
+
116
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
117
+ <h5><code>setSize(size)<i>: void</i></code></h5>
118
+ <p>Sets the width of the left pane.</p>
119
+
120
+ </main>
121
+ <div style="height:33vh"></div>
122
+ <script type="module" src="../src/components/Import.js"></script>
123
+ <script type="module" src="../src/components/Card.js"></script>
124
+ <script type="module" src="../src/components/Split.js"></script>
125
+ </body>
126
+ </html>