kempo-ui 0.0.3 → 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 (137) hide show
  1. package/.github/workflows/publish-major.yml +39 -0
  2. package/.github/workflows/publish-minor.yml +39 -0
  3. package/.github/workflows/{publish-npm.yml → publish-patch.yml} +1 -1
  4. package/.vscode/settings.json +2 -0
  5. package/dist/kempo-hljs.css +1 -0
  6. package/dist/src/components/Accordion.js +36 -0
  7. package/dist/src/components/Card.js +37 -0
  8. package/dist/src/components/Collapsible.js +41 -0
  9. package/dist/src/components/ContentSlider.js +44 -0
  10. package/dist/src/components/Dialog.js +113 -0
  11. package/dist/src/components/Icon.js +2 -2
  12. package/dist/src/components/PersistantCollapsible.js +1 -0
  13. package/dist/src/components/PhotoViewer.js +135 -0
  14. package/dist/src/components/Resize.js +96 -0
  15. package/dist/src/components/ShowMore.js +42 -0
  16. package/dist/src/components/SideMenu.js +1 -1
  17. package/dist/src/components/Split.js +84 -0
  18. package/dist/src/components/Tabs.js +155 -0
  19. package/dist/src/components/Tags.js +69 -0
  20. package/dist/src/components/ThemeSwitcher.js +23 -0
  21. package/dist/src/components/Timestamp.js +1 -0
  22. package/dist/src/utils/debounce.js +1 -0
  23. package/dist/src/utils/drag.js +1 -0
  24. package/dist/src/utils/formatTimestamp.js +1 -0
  25. package/dist/src/utils/propConverters.js +1 -0
  26. package/dist/src/utils/watchWindowSize.js +1 -0
  27. package/docs/components/accordion.html +69 -25
  28. package/docs/components/card.html +6 -5
  29. package/docs/components/collapsible.html +198 -0
  30. package/docs/components/content-slider.html +56 -26
  31. package/docs/components/dialog.html +54 -48
  32. package/docs/components/focus-capture.html +2 -3
  33. package/docs/components/icon.html +5 -8
  34. package/docs/components/import.html +1 -6
  35. package/docs/components/persistant-collapsible.html +123 -0
  36. package/docs/components/photo-viewer.html +226 -0
  37. package/docs/components/resize.html +44 -18
  38. package/docs/components/show-more.html +12 -6
  39. package/docs/components/side-menu.html +3 -12
  40. package/docs/components/split.html +26 -5
  41. package/docs/components/tablePagination.html +4 -4
  42. package/docs/components/tableRecordFiltering.html +16 -3
  43. package/docs/components/tableRecordSelection.html +2 -2
  44. package/docs/components/tabs.html +24 -7
  45. package/docs/components/tags.html +24 -8
  46. package/docs/components/theme-switcher.html +3 -6
  47. package/docs/components/timestamp.html +20 -24
  48. package/docs/components/toast.html +23 -32
  49. package/docs/components/toggle.html +4 -3
  50. package/docs/kempo-hljs.css +1 -0
  51. package/docs/media/civic.jpg +0 -0
  52. package/docs/media/corvette.jpg +0 -0
  53. package/docs/media/evo.jpg +0 -0
  54. package/docs/media/gtr.jpg +0 -0
  55. package/docs/media/nsx.jpg +0 -0
  56. package/docs/nav.inc.html +11 -17
  57. package/docs/src/components/Accordion.js +36 -0
  58. package/docs/src/components/Card.js +37 -0
  59. package/docs/src/components/Collapsible.js +41 -0
  60. package/docs/src/components/ContentSlider.js +44 -0
  61. package/docs/src/components/Dialog.js +113 -0
  62. package/docs/src/components/Icon.js +2 -2
  63. package/docs/src/components/PersistantCollapsible.js +1 -0
  64. package/docs/src/components/PhotoViewer.js +135 -0
  65. package/docs/src/components/Resize.js +96 -0
  66. package/docs/src/components/ShowMore.js +42 -0
  67. package/docs/src/components/SideMenu.js +1 -1
  68. package/docs/src/components/Split.js +84 -0
  69. package/docs/src/components/Tabs.js +155 -0
  70. package/docs/src/components/Tags.js +69 -0
  71. package/docs/src/components/ThemeSwitcher.js +23 -0
  72. package/docs/src/components/Timestamp.js +1 -0
  73. package/docs/src/utils/debounce.js +1 -0
  74. package/docs/src/utils/drag.js +1 -0
  75. package/docs/src/utils/formatTimestamp.js +1 -0
  76. package/docs/src/utils/propConverters.js +1 -0
  77. package/docs/src/utils/watchWindowSize.js +1 -0
  78. package/docs/utils/debounce.html +78 -0
  79. package/docs/utils/drag.html +104 -0
  80. package/docs/utils/formatTimestamp.html +114 -0
  81. package/docs/utils/propConverters.html +132 -0
  82. package/docs/utils/watchWindowSize.html +166 -0
  83. package/icons/error.svg +1 -1
  84. package/icons/warning.svg +1 -1
  85. package/package.json +1 -1
  86. package/scripts/build.js +1 -1
  87. package/scripts/docs.js +4 -2
  88. package/src/components/Accordion.js +229 -0
  89. package/src/components/Collapsible.js +109 -0
  90. package/src/components/ContentSlider.js +205 -0
  91. package/src/components/Dialog.js +368 -0
  92. package/src/components/PersistantCollapsible.js +69 -0
  93. package/src/components/PhotoViewer.js +368 -0
  94. package/src/components/Resize.js +210 -0
  95. package/src/components/ShadowComponent.js +3 -1
  96. package/src/components/ShowMore.js +109 -0
  97. package/src/components/Sortable.js +193 -0
  98. package/src/components/Split.js +192 -0
  99. package/src/components/Table.js +1202 -0
  100. package/src/components/Tabs.js +428 -0
  101. package/src/components/Tags.js +253 -0
  102. package/src/components/Timestamp.js +31 -0
  103. package/src/components/Toast.js +454 -0
  104. package/src/components/Toggle.js +173 -0
  105. package/src/components/tableControls/DeleteRecord.js +29 -0
  106. package/src/components/tableControls/Edit.js +88 -0
  107. package/src/components/tableControls/ExportCSV.js +71 -0
  108. package/src/components/tableControls/ExportJson.js +55 -0
  109. package/src/components/tableControls/FieldSortHide.js +76 -0
  110. package/src/components/tableControls/Filters.js +114 -0
  111. package/src/components/tableControls/FirstPage.js +65 -0
  112. package/src/components/tableControls/HiddenCount.js +45 -0
  113. package/src/components/tableControls/Hide.js +34 -0
  114. package/src/components/tableControls/LastPage.js +65 -0
  115. package/src/components/tableControls/NextPage.js +65 -0
  116. package/src/components/tableControls/PageSelect.js +109 -0
  117. package/src/components/tableControls/PageSize.js +68 -0
  118. package/src/components/tableControls/PrevPage.js +65 -0
  119. package/src/components/tableControls/Search.js +58 -0
  120. package/src/components/tableControls/ShowAll.js +34 -0
  121. package/src/components/tableControls/TableControl.js +105 -0
  122. package/src/utils/debounce.js +9 -0
  123. package/src/utils/drag.js +80 -0
  124. package/src/utils/formatTimestamp.js +27 -0
  125. package/src/utils/toTitleCase.js +9 -0
  126. package/src/utils/watchWindowSize.js +16 -0
  127. package/dist/src/utils/cli.js +0 -1
  128. package/dist/src/utils/fs-utils.js +0 -1
  129. package/docs/components/component.html +0 -90
  130. package/docs/components/directory-viewer.html +0 -90
  131. package/docs/components/lazy-component.html +0 -84
  132. package/docs/components/reactive-component.html +0 -69
  133. package/docs/components/reactive-lazy-component.html +0 -69
  134. package/docs/components/search.html +0 -102
  135. package/docs/components/sortable.html +0 -96
  136. package/src/utils/cli.js +0 -43
  137. package/src/utils/fs-utils.js +0 -41
package/docs/components/component.html DELETED
@@ -1,90 +0,0 @@
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>Component - 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">Component</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
- <a href="#constructor">Constructor</a><br />
26
- <a href="#requirements">Requirements</a><br />
27
- <a href="#attributes">Attributes</a><br />
28
- <a href="#properties">Properties</a><br />
29
- <a href="#methods">Methods</a><br />
30
- </div>
31
- </details>
32
-
33
- <h3>Description</h3>
34
- <p><code>Component</code> is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components" target="_blank">Web Component</a> (JS Class) from which all <b>Kempo</b> components are created, it handles the creation of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM" target="_blank">Shadow DOM</a> from the <a href="#shadowTemplate">shadowTemplate</a> and <a href="#shadowStyles">shadowStyles</a>, along with creating utility methods for creating attributes and methods.</p>
35
-
36
- <h3 id="requirements">Requirements</h3>
37
- <ul>
38
- <li><a href="">getCase Utility Function</a></li>
39
- </ul>
40
-
41
- <h3 id="constructor">Constructor</h3>
42
- <h6>Extends <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a></h6>
43
- <h5>
44
- <code>super()</code><br />
45
- <code>super(<i>Object</i> shadowOptions)</code>
46
- </h5>
47
- <p>This class <b class="tc-danger">can not</b> be instatiated directly, but rather <b class="tc-success">should be</b> extended, optionally passing in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options" target="_blank">shadowOptions</a>.</p>
48
-
49
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-comment">// Your Constructor</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
50
-
51
- <h3 id="attributes">Attributes</h3>
52
- <h5><code>rendered</code> <i>Boolean</i></h5>
53
- <p>A <b class="tc-damger">READ ONLY</b> boolean that indicates if this element has been rendered.</p>
54
-
55
- <h3>Properties</h3>
56
- <h5 id="shadowTemplate"><code>shadowTemplate</code> <i>String</i></h5>
57
- <p>A string of <b class="tc-primary">HTML</b> that is used to render the markup of the component. This <b class="tc-success">should be</b> overwritten in your component with your own markup, but make sure to use the <code>super.shadowTemplate</code> to get the default slot.</p>
58
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-comment">/* Other things */</span><br /> <span class="hljs-keyword">get</span> shadowTemplate(){<br /> <span class="hljs-keyword">return</span> <span class="hljs-comment">/*html*/</span><span class="hljs-string">`<br /> <span class="hljs-subst">${<span class="hljs-keyword">super</span>.shadowTemplate}</span><br /> &lt;p&gt;This is my component&lt;/p&gt;<br /> `</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
59
-
60
- <h5 id="shadowStyles"><code>shadowStyles</code> <i>String</i></h5>
61
- <p>A string of <b class="tc-primary">CSS</b> that styles the Shadow DOM (from the <code>shadowTemplate</code>).</p>
62
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-comment">/* Other things */</span><br /> <span class="hljs-keyword">get</span> shadowStyles(){<br /> <span class="hljs-keyword">return</span> <span class="hljs-comment">/*css*/</span><span class="hljs-string">`<br /> :host {<br /> /* Style this element */<br /> }<br /> p {<br /> /* Style Shadow DOM Elements */<br /> }<br /> `</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
63
-
64
- <h3 id="methods">Methods</h3>
65
- <h5><code>async render(<i>Boolean</i> force = false)</code></h5>
66
- <p>This method renders the Shadow DOM if it has not already been rendered, and sets the <code>rendered</code> attribute to <code>true</code>.</p>
67
- <p>This <b class="tc-success">should be</b> overwritten in your component with your own function, but make sure to use the <code>super.render(force)</code> to render the Shadow DOM.</p>
68
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">async</span> render(force){<br /> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br /> <span class="hljs-comment">/* The Shadow DOM is ready, do your stuff here<br /> This is often attaching event handlers to Shadow DOM elements<br /> */</span><br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br /> }<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
69
-
70
- <h5><code>registerAttribute(<i>String</i> name, <i>Any</i> defaultValue = '')</code></h5>
71
- <p>This method creates an attribute (dash case), that can also be accessed as a member with camel case. This is typically done in the constructor.</p>
72
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.registerAttribute(<span class="hljs-string">'my-att'</span>, <span class="hljs-string">'hello'</span>);<br /> <span class="hljs-comment">// this can now be accessed by using this.myAtt</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
73
-
74
- <h5><code>registerAttributes(<i>Object</i> attributes)</code></h5>
75
- <p>This is the same as <code>registerAttribute</code>, except it takes the attributes as key-value-pairs allowing you to register multiple attributes at once.</p>
76
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.registerAttributes({<br /> <span class="hljs-string">'myAttr1'</span>: <span class="hljs-string">'value1'</span>,<br /> <span class="hljs-string">'myAttr2'</span>: <span class="hljs-string">'value2'</span> <br /> });<br /> <span class="hljs-comment">// this can now be accessed by using this.myAttr1 and this.myAttr2</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
77
-
78
- <h5><code>registerProp(<i>String</i> name, <i>Any</i> defaultValue)</code></h5>
79
- <p>This method creates a property. This is typically done in the constructor.</p>
80
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.registerProp(<span class="hljs-string">'myProp'</span>, [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>]);<br /> <span class="hljs-comment">// this can now be accessed by using this.myProp</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
81
-
82
- <h5><code>registerProps(<i>Object</i> properties)</code></h5>
83
- <p>This is the same as <code>registerProp</code>, except it takes the props as key-value-pairs allowing you to register multiple props at once.</p>
84
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Component <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-keyword">this</span>.registerProps({<br /> <span class="hljs-attr">myProp1</span>: [<span class="hljs-string">'foo'</span>, <span class="hljs-string">'bar'</span>],<br /> <span class="hljs-attr">myProp2</span>: <span class="hljs-number">5</span><br /> });<br /> <span class="hljs-comment">// these props can now be accessed by using this.myProp1 and this.myProp2</span><br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
85
-
86
- </main>
87
- <div style="height:33vh"></div>
88
- <script type="module" src="../src/components/Import.js"></script>
89
- </body>
90
- </html>
package/docs/components/directory-viewer.html DELETED
@@ -1,90 +0,0 @@
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>Directory Viewer - 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">Directory Viewer</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
-
26
- <h6 class="mt">JavaScript Reference</h6>
27
- <a href="#constructor">Constructor</a><br />
28
- <a href="#requirements">Requirements</a><br />
29
- <a href="#attributes">Attributes</a><br />
30
- <a href="#properties">Properties</a><br />
31
- <a href="#methods">Methods</a><br />
32
- </div>
33
- </details>
34
-
35
- <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
36
- <p>Create a directory viewer using the <code>k-directory-viewer</code> component. Load a directory by calling the <code>loadDirectory()</code> method.</p>
37
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-directory-viewer</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dv1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-directory-viewer</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> DirectoryViewer <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/DirectoryViewer.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'dv1'</span>).loadDirectory();<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
38
- <k-directory-viewer id="dv1"></k-directory-viewer>
39
- <script type="module">
40
- import DirectoryViewer from '/kempo/components/DirectoryViewer.js';
41
- // document.getElementById('dv1').loadDirectory();
42
- </script>
43
-
44
- <h2 id="jsRef">JavaScript Reference</h2>
45
-
46
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
47
- <h6>Extends <a href="./component.html">Component</a></h6>
48
- <h5>
49
- <code>new DirectoryViewer(handle)</code>
50
- </h5>
51
-
52
- <h4>Parameters</h4>
53
- <h5><code>handle<i>: FileSystemDirectoryHandle</i></code></h5>
54
- <p>The handle to the directory.</p>
55
-
56
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
57
- <ul>
58
- <li><a href="./component.html">Component</a></li>
59
- </ul>
60
-
61
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
62
- <h5><code>hasHandle<i>: boolean</i></code></h5>
63
- <p>Whether the directory viewer has a handle.</p>
64
- <h5><code>selected<i>: boolean</i></code></h5>
65
- <p>Whether the directory viewer is selected.</p>
66
-
67
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
68
- <h5><code>handle<i>: FileSystemDirectoryHandle</i></code></h5>
69
- <p>The handle to the directory.</p>
70
- <h5><code>filters<i>: Array</i></code></h5>
71
- <p>An array of filters applied to the directory viewer.</p>
72
-
73
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
74
- <h5><code>loadDirectory()<i>: Promise</i></code></h5>
75
- <p>Loads a directory using the file picker API.</p>
76
- <h5><code>clearDirectoryHandle()<i>: void</i></code></h5>
77
- <p>Clears the directory handle.</p>
78
- <h5><code>updateContents()<i>: void</i></code></h5>
79
- <p>Updates the contents of the directory viewer.</p>
80
- <h5><code>select()<i>: void</i></code></h5>
81
- <p>Selects the directory viewer.</p>
82
- <h5><code>addFilter(filter)<i>: void</i></code></h5>
83
- <p>Adds a filter to the directory viewer.</p>
84
-
85
- </main>
86
- <div style="height:33vh"></div>
87
- <script type="module" src="../src/components/Import.js"></script>
88
- <script type="module" src="../src/components/DirectoryViewer.js"></script>
89
- </body>
90
- </html>
package/docs/components/lazy-component.html DELETED
@@ -1,84 +0,0 @@
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>LazyComponent - 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">LazyComponent</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
-
26
- <h6 class="mt">JavaScript Reference</h6>
27
- <a href="#constructor">Constructor</a><br />
28
- <a href="#requirements">Requirements</a><br />
29
- <a href="#attributes">Attributes</a><br />
30
- <a href="#properties">Properties</a><br />
31
- <a href="#methods">Methods</a><br />
32
- </div>
33
- </details>
34
-
35
- <h3>Description</h3>
36
- <p>This is a base class like <a href="./component.html">Component</a> but the <code>render</code> method is not called until the element is visible (in the view), a skeleton is rendered until then.</p>
37
-
38
- <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
39
- <p>Extend the <code>LazyComponent</code> class to create a lazy-loaded component. The component will render its content only when it becomes visible in the viewport.</p>
40
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> LazyComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyLazyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LazyComponent</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-comment">// Your Constructor</span><br /> }<br /> <span class="hljs-keyword">async</span> render(force){<br /> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br /> <span class="hljs-comment">// Your render logic</span><br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br /> }<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-lazy-component'</span>, MyLazyComponent);</code></pre>
41
-
42
- <h3 id="basicUsage"><a href="#interval" class="no-link">In-View Interval Timeout</a></h3>
43
- <p>In addition to using intersection observes to watch for components being scrolled into view, an interval is used to check if the component suddenly become visible via a display style change to itself or a parent. The timeout of the interval can be set for all instances of your LazyComponent by chaning the static member <code>inViewIntervalTimeout</code>.</p>
44
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> LazyComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyLazyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LazyComponent</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-comment">// Your Constructor</span><br /> }<br /> <span class="hljs-keyword">async</span> render(force){<br /> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br /> <span class="hljs-comment">// Your render logic</span><br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br /> }<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br /> }<br /><br /> <span class="hljs-keyword">static</span> inViewIntervalTimeout = <span class="hljs-number">200</span>; <span class="hljs-comment">// Change the inView checking interval to 200ms instead of the default 1000</span><br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-lazy-component'</span>, MyLazyComponent);</code></pre>
45
-
46
- <h5>Individal Component interval timer overwrites</h5>
47
- <p>You can overwrite this interval timeout for individual elements by setting the <code>in-view-interval</code> attribute.</p>
48
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">my-lazy-component</span> <span class="hljs-attr">in-view-interval</span>=<span class="hljs-string">"5000"</span>&gt;</span><br /> <span class="hljs-comment">&lt;!-- The interval to check if it is in-view (due to element/parent visibility change) is now set to check every 5 seconds --&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">my-lazy-component</span>&gt;</span></code></pre>
49
-
50
- <h2 id="jsRef">JavaScript Reference</h2>
51
-
52
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
53
- <h6>Extends <a href="./component.html">Component</a></h6>
54
- <h5>
55
- <code>new LazyComponent()</code><br />
56
- <code>new LazyComponent(<i>Object</i> shadowOptions)</code>
57
- </h5>
58
- <p>This class <b class="tc-danger">cannot</b> be instantiated directly, but rather <b class="tc-success">should be</b> extended, optionally passing in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options" target="_blank">shadowOptions</a>.</p>
59
-
60
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
61
- <ul>
62
- <li><a href="./component.html">Component</a></li>
63
- <li><a href="../utils/element.js">isInView Utility Function</a></li>
64
- <li><a href="../utils/raf.js">raf Utility Function</a></li>
65
- </ul>
66
-
67
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
68
- <h5><code>unrender<i>: boolean</i></code></h5>
69
- <p>If set to <code>true</code>, the component will unrender its content when it goes out of view.</p>
70
-
71
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
72
- <h5><code>async renderSkelton()<i>: Promise</i></code></h5>
73
- <p>Renders the skeleton template of the component. This is called when the component is not yet visible in the viewport or when it goes out of view and <code>unrender</code> is set to <code>true</code>.</p>
74
-
75
- <h5><code>async inViewCallback()<i>: Promise</i></code></h5>
76
- <p>Callback method that is called when the component becomes visible in the viewport. By default, it calls the <code>render</code> method.</p>
77
-
78
- <h5><code>async outOfViewCallback()<i>: Promise</i></code></h5>
79
- <p>Callback method that is called when the component goes out of view. If <code>unrender</code> is set to <code>true</code>, it calls the <code>renderSkelton</code> method.</p>
80
-
81
- </main>
82
- <script type="module" src="../src/components/Import.js"></script>
83
- </body>
84
- </html>
package/docs/components/reactive-component.html DELETED
@@ -1,69 +0,0 @@
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>ReactiveComponent - 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">ReactiveComponent</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
-
26
- <h6 class="mt">JavaScript Reference</h6>
27
- <a href="#constructor">Constructor</a><br />
28
- <a href="#requirements">Requirements</a><br />
29
- <a href="#attributes">Attributes</a><br />
30
- <a href="#properties">Properties</a><br />
31
- <a href="#methods">Methods</a><br />
32
- </div>
33
- </details>
34
-
35
- <h3>Description</h3>
36
- <p>The <code>ReactiveComponent</code> class extends the <a href="./component.html">Component</a> class and provides additional functionality to automatically re-render the component when specified attributes change.</p>
37
-
38
- <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
39
- <p>Extend the <code>ReactiveComponent</code> class to create a component that automatically re-renders when specified attributes change.</p>
40
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ReactiveComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyReactiveComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ReactiveComponent</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-comment">// Your Constructor</span><br /> }<br /> <span class="hljs-keyword">static</span> get renderOnChange(){<br /> <span class="hljs-keyword">return</span> [<span class="hljs-string">'my-attr'</span>];<br /> }<br /> <span class="hljs-keyword">async</span> render(force){<br /> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br /> <span class="hljs-comment">// Your render logic</span><br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br /> }<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-reactive-component'</span>, MyReactiveComponent);</code></pre>
41
-
42
- <h2 id="jsRef">JavaScript Reference</h2>
43
-
44
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
45
- <h6>Extends <a href="./component.html">Component</a></h6>
46
- <h5>
47
- <code>new ReactiveComponent()</code>
48
- </h5>
49
-
50
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
51
- <ul>
52
- <li><a href="./component.html">Component</a></li>
53
- </ul>
54
-
55
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
56
- <p>The <code>ReactiveComponent</code> class does not introduce any new attributes beyond those provided by the <a href="./component.html">Component</a> class.</p>
57
-
58
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
59
- <h5><code>attributeChangedCallback(n, oV, nV)<i>: void</i></code></h5>
60
- <p>Overrides the <code>attributeChangedCallback</code> method to automatically re-render the component when specified attributes change.</p>
61
-
62
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
63
- <h5><code>static renderOnChange<i>: Array</i></code></h5>
64
- <p>An array of attribute names that should trigger a re-render when they change. This property should be overridden in your component class.</p>
65
-
66
- </main>
67
- <script type="module" src="../src/components/Import.js"></script>
68
- </body>
69
- </html>
package/docs/components/reactive-lazy-component.html DELETED
@@ -1,69 +0,0 @@
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>ReactiveLazyComponent - 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">ReactiveLazyComponent</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
-
26
- <h6 class="mt">JavaScript Reference</h6>
27
- <a href="#constructor">Constructor</a><br />
28
- <a href="#requirements">Requirements</a><br />
29
- <a href="#attributes">Attributes</a><br />
30
- <a href="#properties">Properties</a><br />
31
- <a href="#methods">Methods</a><br />
32
- </div>
33
- </details>
34
-
35
- <h3>Description</h3>
36
- <p>The <code>ReactiveLazyComponent</code> class extends the <a href="./lazy-component.html">LazyComponent</a> class and provides additional functionality to automatically re-render the component when specified attributes change.</p>
37
-
38
- <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
39
- <p>Extend the <code>ReactiveLazyComponent</code> class to create a component that automatically re-renders when specified attributes change and only renders its content when it becomes visible in the viewport.</p>
40
- <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ReactiveLazyComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'kempo'</span>;<br /><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyReactiveLazyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ReactiveLazyComponent</span> </span>{<br /> <span class="hljs-keyword">constructor</span>(){<br /> <span class="hljs-keyword">super</span>();<br /> <span class="hljs-comment">// Your Constructor</span><br /> }<br /> <span class="hljs-keyword">static</span> get renderOnChange(){<br /> <span class="hljs-keyword">return</span> [<span class="hljs-string">'my-attr'</span>];<br /> }<br /> <span class="hljs-keyword">async</span> render(force){<br /> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">await</span> <span class="hljs-keyword">super</span>.render(force)){<br /> <span class="hljs-comment">// Your render logic</span><br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;<br /> }<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br /> }<br />}<br /><span class="hljs-built_in">window</span>.customElements.define(<span class="hljs-string">'my-reactive-lazy-component'</span>, MyReactiveLazyComponent);</code></pre>
41
-
42
- <h2 id="jsRef">JavaScript Reference</h2>
43
-
44
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
45
- <h6>Extends <a href="./lazy-component.html">LazyComponent</a></h6>
46
- <h5>
47
- <code>new ReactiveLazyComponent()</code>
48
- </h5>
49
-
50
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
51
- <ul>
52
- <li><a href="./lazy-component.html">LazyComponent</a></li>
53
- </ul>
54
-
55
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
56
- <p>The <code>ReactiveLazyComponent</code> class does not introduce any new attributes beyond those provided by the <a href="./lazy-component.html">LazyComponent</a> class.</p>
57
-
58
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
59
- <h5><code>attributeChangedCallback(n, oV, nV)<i>: void</i></code></h5>
60
- <p>Overrides the <code>attributeChangedCallback</code> method to automatically re-render the component when specified attributes change.</p>
61
-
62
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
63
- <h5><code>static renderOnChange<i>: Array</i></code></h5>
64
- <p>An array of attribute names that should trigger a re-render when they change. This property should be overridden in your component class.</p>
65
-
66
- </main>
67
- <script type="module" src="../src/components/Import.js"></script>
68
- </body>
69
- </html>
package/docs/components/search.html DELETED
@@ -1,102 +0,0 @@
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>Search - 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" />`n <link rel="stylesheet" href="../styles.css" />
10
- <script type="module">
11
- import Import from '../src/components/Import.js';
12
- import Icon from '../src/components/Icon.js';
13
- Import.replacements.root = '../';
14
- Icon.pathToIcons = ['../icons'];
15
- </script>
16
- </head>
17
- <body>
18
- <k-import src="../nav.inc.html"></k-import>
19
- <h1 class="ta-center">Search</h1>
20
- <main>
21
- <details class="b r mb">
22
- <summary class="p">Table of Contents</summary>
23
- <div class="m mt0 pl">
24
- <h6>Examples</h6>
25
- <a href="#basicUsage">Basic Usage</a><br />
26
- <a href="#updateSearchDataUrl">Update searchDataUrl</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
- <a href="#staticMembers">Static Members</a><br />
35
- </div>
36
- </details>
37
-
38
- <h3>Description</h3>
39
- <p>The <code>Search</code> component provides a search input field with debounced input handling and search result display.</p>
40
-
41
- <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
42
- <pre><code class="html">&lt;k-search&gt;&lt;/k-search&gt;</code></pre>
43
- <k-search class="mb"></k-search>
44
-
45
- <br>
46
- <h3 id="updateSearchDataUrl"><a href="#updateSearchDataUrl" class="no-link">Update searchDataUrl</a></h3>
47
- <p>You can update the URL from which the search data is fetched by setting the <code>searchDataUrl</code> static member. This should be done in the head of your document before any search components are instatiated.</p>
48
- <pre><code class="javascript">import Search from '../src/components/Search.js';<br/>Search.searchDataUrl = '/custom-search.json';</code></pre>
49
-
50
- <br>
51
- <h2 id="jsRef">JavaScript Reference</h2>
52
-
53
- <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
54
- <h6>Extends <a href="./component.html">Component</a></h6>
55
- <h5>
56
- <code>new Search()</code>
57
- </h5>
58
-
59
- <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
60
- <ul>
61
- <li><a href="../utils/debounce.html">debounce</a></li>
62
- </ul>
63
-
64
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
65
- <h5><code>opened: boolean</code></h5>
66
- <p>Indicates whether the search results are visible.</p>
67
-
68
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
69
- <h5><code>pages: object</code></h5>
70
- <p>Contains the search data loaded from <code>/search.json</code>.</p>
71
-
72
- <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
73
- <h5><code>render(force: boolean): Promise&lt;boolean&gt;</code></h5>
74
- <p>Renders the component and attaches event listeners to the input field.</p>
75
-
76
- <h5><code>search(term: string): void</code></h5>
77
- <p>Performs the search operation and updates the search results.</p>
78
-
79
- <h3 id="staticMembers"><a href="#staticMembers" class="no-link">Static Members</a></h3>
80
- <h5><code>Search.searchDataUrl: string</code></h5>
81
- <p>The URL from which the search data is fetched. Default is <code>/search.json</code>.</p>
82
-
83
- <h3 id="searchDataFormat"><a href="#searchDataFormat" class="no-link">Search Data Format</a></h3>
84
- <p>The search data file should be a JSON object where each key is a URL path and the value is an object with the following properties:</p>
85
- <ul>
86
- <li><code>name</code>: The name of the page.</li>
87
- <li><code>terms</code>: An array of terms associated with the page.</li>
88
- </ul>
89
- <pre><code class="json">{
90
- "/components/accordion.html": {
91
- "name": "Components > Accordion",
92
- "terms": ["accordion", "collapsible", "toggle", "content", "panel", "header"]
93
- },
94
- "/components/component.html": {
95
- "name": "Components > Component",
96
- "terms": ["component", "base", "root", "framework", "parent"]
97
- }
98
- }</code></pre>
99
- </main>
100
- <script type="module" src="../src/components/Import.js"></script>
101
- </body>
102
- </html>