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/toast.html CHANGED
@@ -9,8 +9,10 @@
9
9
  <script type="module">
10
10
  import Import from '../src/components/Import.js';
11
11
  import Icon from '../src/components/Icon.js';
12
+ import ShadowComponent from '../src/components/ShadowComponent.js';
12
13
  Import.replacements.root = '../';
13
14
  Icon.pathToIcons = ['../icons'];
15
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
14
16
  </script>
15
17
  </head>
16
18
  <body>
@@ -32,7 +34,6 @@
32
34
  <a href="#constructor">Constructor</a><br />
33
35
  <a href="#staticMethods">Static Methods</a><br />
34
36
  <a href="#requirements">Requirements</a><br />
35
- <a href="#attributes">Attributes</a><br />
36
37
  <a href="#properties">Properties</a><br />
37
38
  <a href="#methods">Methods</a><br />
38
39
  <a href="#events">Events</a><br />
@@ -46,12 +47,12 @@
46
47
  <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
47
48
  <div class="row -mx">
48
49
  <div class="col d-span-6 t-span-6 m-span-12 px">
49
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span>Open Toast<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
50
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example1"</span>&gt;</span>Open Toast<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
50
51
  </div>
51
52
  <div class="col d-span-6 t-span-6 m-span-12 px">
52
53
  <button id="example1" class="mb">Open Toast</button>
53
54
  <script type="module">
54
- import Toast from '/kempo/components/Toast.js';
55
+ import Toast from '/src/components/Toast.js';
55
56
  document.getElementById('example1').addEventListener('click', () => {
56
57
  Toast.create("Hello World");
57
58
  });
@@ -74,7 +75,7 @@
74
75
  <button id="example2-bottomcenter" class="mb">Bottom Center</button>
75
76
  <button id="example2-bottomright" class="mb">Bottom Right</button>
76
77
  <script type="module">
77
- import Toast from '/kempo/components/Toast.js';
78
+ import Toast from '/src/components/Toast.js';
78
79
  document.getElementById('example2-topleft').addEventListener('click', () => {
79
80
  Toast.create("Hello Top Left", {
80
81
  position: "top left"
@@ -113,14 +114,14 @@
113
114
  <p>Toasts can automatically close after a specified timeout (in milliseconds). The default timeout when using <code>Toast.create</code> is <code>5000</code> (ms), or 5 seconds.</p>
114
115
  <div class="row -mx">
115
116
  <div class="col d-span-6 t-span-6 m-span-12 px">
116
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-1"</span>&gt;</span>Open 1 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example3-3"</span>&gt;</span>Open 3 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example3-10"</span>&gt;</span>Open 10 Second Timeout Toast<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"I will timeout in 1 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">1000</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-3'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"I will timeout in 3 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-10'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"I will timeout in 10 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">10000</span><br /> });<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
117
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example3-1"</span>&gt;</span>Open 1 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example3-3"</span>&gt;</span>Open 3 Second Timeout Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example3-10"</span>&gt;</span>Open 10 Second Timeout Toast<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-1'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"I will timeout in 1 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">1000</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-3'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"I will timeout in 3 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example3-10'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"I will timeout in 10 second"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">10000</span><br /> });<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
117
118
  </div>
118
119
  <div class="col d-span-6 t-span-6 m-span-12 px">
119
120
  <button id="example3-1" class="mb">Open 1 Second Timeout Toast</button>
120
121
  <button id="example3-3" class="mb">Open 3 Second Timeout Toast</button>
121
122
  <button id="example3-10" class="mb">Open 10 Second Timeout Toast</button>
122
123
  <script type="module">
123
- import Toast from '/kempo/components/Toast.js';
124
+ import Toast from '/src/components/Toast.js';
124
125
  document.getElementById('example3-1').addEventListener('click', () => {
125
126
  Toast.create("I will timeout in 1 second", {
126
127
  timeout: 1000
@@ -145,14 +146,14 @@
145
146
  <p>Toasts can have action and close buttons that trigger callbacks when clicked.</p>
146
147
  <div class="row -mx">
147
148
  <div class="col d-span-6 t-span-6 m-span-12 px">
148
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action"</span>&gt;</span>Open Toast with Action<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example4-close"</span>&gt;</span>Open Toast with Close Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example4-action-close"</span>&gt;</span>Open Toast with Action and Close Button<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br /> <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br /> Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br /> }<br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">close</span>: <span class="hljs-string">'&lt;k-icon name="close"&gt;&lt;/div&gt;'</span>,<br /> <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br /> Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br /> }<br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br /> <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br /> Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">// return false to prevent closing</span><br /> },<br /> <span class="hljs-attr">close</span>: <span class="hljs-string">'&lt;k-icon name="close"&gt;&lt;/div&gt;'</span>,<br /> <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br /> Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br /> }<br /> });<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
149
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example4-action"</span>&gt;</span>Open Toast with Action<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example4-close"</span>&gt;</span>Open Toast with Close Button<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example4-action-close"</span>&gt;</span>Open Toast with Action and Close Button<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br /> <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br /> Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br /> }<br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">close</span>: <span class="hljs-string">'&lt;k-icon name="close"&gt;&lt;/div&gt;'</span>,<br /> <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br /> Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br /> }<br /> });<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example4-action-close'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.create(<span class="hljs-string">"Hello World"</span>, {<br /> <span class="hljs-attr">timeout</span>: <span class="hljs-number">0</span>,<br /> <span class="hljs-attr">action</span>: <span class="hljs-string">'Click Me'</span>,<br /> <span class="hljs-attr">actionCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br /> Toast.create(<span class="hljs-string">"You clicked the action"</span>);<br /> <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">// return false to prevent closing</span><br /> },<br /> <span class="hljs-attr">close</span>: <span class="hljs-string">'&lt;k-icon name="close"&gt;&lt;/div&gt;'</span>,<br /> <span class="hljs-attr">closeCallback</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<br /> Toast.create(<span class="hljs-string">"You closed the toast"</span>);<br /> }<br /> });<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
149
150
  </div>
150
151
  <div class="col d-span-6 t-span-6 m-span-12 px">
151
152
  <button id="example4-action" class="mb">Open Toast with Action</button>
152
153
  <button id="example4-close" class="mb">Open Toast with Close Button</button>
153
154
  <button id="example4-action-close" class="mb">Open Toast with Action and Close Button</button>
154
155
  <script type="module">
155
- import Toast from '/kempo/components/Toast.js';
156
+ import Toast from '/src/components/Toast.js';
156
157
  document.getElementById('example4-action').addEventListener('click', () => {
157
158
  Toast.create("Hello World", {
158
159
  timeout: 0,
@@ -193,14 +194,14 @@
193
194
  <p>Toasts can be created as a success, warning or error message.</p>
194
195
  <div class="row -mx">
195
196
  <div class="col d-span-6 t-span-6 m-span-12 px">
196
- <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-success"</span>&gt;</span>Success Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example5-warning"</span>&gt;</span>Warning Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example5-error"</span>&gt;</span>Error Toast<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-success'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.success(<span class="hljs-string">"It Worked!"</span>);<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-warning'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.warning(<span class="hljs-string">"Be Careful"</span>);<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-error'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.error(<span class="hljs-string">"That's a very bad idea"</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
197
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example5-success"</span>&gt;</span>Success Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example5-warning"</span>&gt;</span>Warning Toast<span class="hljs-tag">&lt;/<span class="hljs-name">button</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">"example5-error"</span>&gt;</span>Error Toast<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> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br /> <span class="hljs-keyword">import</span> Toast <span class="hljs-keyword">from</span> <span class="hljs-string">'/src/components/Toast.js'</span>;<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-success'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.success(<span class="hljs-string">"It Worked!"</span>);<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-warning'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.warning(<span class="hljs-string">"Be Careful"</span>);<br /> });<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example5-error'</span>).addEventListener(<span class="hljs-string">'click'</span>, () =&gt; {<br /> Toast.error(<span class="hljs-string">"That's a very bad idea"</span>);<br /> });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
197
198
  </div>
198
199
  <div class="col d-span-6 t-span-6 m-span-12 px">
199
200
  <button id="example5-success" class="mb">Success Toast</button>
200
201
  <button id="example5-warning" class="mb">Warning Toast</button>
201
202
  <button id="example5-error" class="mb">Error Toast</button>
202
203
  <script type="module">
203
- import Toast from '/kempo/components/Toast.js';
204
+ import Toast from '/src/components/Toast.js';
204
205
  document.getElementById('example5-success').addEventListener('click', () => {
205
206
  Toast.success("It Worked!");
206
207
  });
@@ -261,41 +262,29 @@
261
262
 
262
263
  <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
263
264
  <ul>
264
- <li><a href="./component.html">Component</a></li>
265
+ <li>ShadowComponent (configure <code>ShadowComponent.stylesheetPath</code> as needed for your server)</li>
266
+ <li><a href="./icon.html">Icon</a></li>
265
267
  </ul>
266
268
 
267
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
268
- <h5><code>action-html<i>: string</i></code></h5>
269
- <p>HTML content for the action button.</p>
269
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
270
+ <h5><code>actionHtml<i>: string</i></code></h5>
271
+ <p>HTML content for the action button. Syncs to <code>action-html</code> attribute.</p>
270
272
 
271
- <h5><code>close-html<i>: string</i></code></h5>
272
- <p>HTML content for the close button.</p>
273
+ <h5><code>closeHtml<i>: string</i></code></h5>
274
+ <p>HTML content for the close button. Syncs to <code>close-html</code> attribute.</p>
273
275
 
274
276
  <h5><code>timeout<i>: number</i></code></h5>
275
- <p>Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close).</p>
277
+ <p>Time in milliseconds before the toast automatically closes. Default is 0 (no auto-close). Syncs to <code>timeout</code> attribute.</p>
276
278
 
277
279
  <h5><code>opened<i>: boolean</i></code></h5>
278
- <p>Whether the toast is currently open. Default is false.</p>
280
+ <p>Whether the toast is currently open. Default is false. Syncs to <code>opened</code> attribute.</p>
279
281
 
280
- <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
281
282
  <h5><code>actionCallback<i>: function</i></code></h5>
282
283
  <p>Function to call when the action button is clicked.</p>
283
284
 
284
285
  <h5><code>closeCallback<i>: function</i></code></h5>
285
286
  <p>Function to call when the toast is closed.</p>
286
287
 
287
- <h5><code>actionHtml<i>: string</i></code></h5>
288
- <p>HTML content for the action button.</p>
289
-
290
- <h5><code>closeHtml<i>: string</i></code></h5>
291
- <p>HTML content for the close button.</p>
292
-
293
- <h5><code>timeout<i>: number</i></code></h5>
294
- <p>Time in milliseconds before the toast automatically closes.</p>
295
-
296
- <h5><code>opened<i>: boolean</i></code></h5>
297
- <p>Whether the toast is currently open.</p>
298
-
299
288
  <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
300
289
  <h5><code>open()<i>: void</i></code></h5>
301
290
  <p>Opens the toast. If a timeout is specified, this starts the timer for automatic closing.</p>
@@ -323,6 +312,8 @@
323
312
  <p>The position of the container on the screen. Valid values are: 'top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'.</p>
324
313
 
325
314
  </main>
326
- <script type="module" src="../src/components/Import.js"></script>
315
+ <div style="height:33vh"></div>
316
+ <script type="module" src="../src/components/Import.js"></script>
317
+ <script type="module" src="../src/components/Toast.js"></script>
327
318
  </body>
328
319
  </html>
package/docs/components/toggle.html CHANGED
@@ -9,8 +9,10 @@
9
9
  <script type="module">
10
10
  import Import from '../src/components/Import.js';
11
11
  import Icon from '../src/components/Icon.js';
12
+ import ShadowComponent from '../src/components/ShadowComponent.js';
12
13
  Import.replacements.root = '../';
13
14
  Icon.pathToIcons = ['../icons'];
15
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
14
16
  </script>
15
17
  </head>
16
18
  <body>
@@ -29,7 +31,6 @@
29
31
  <h6 class="mt">JavaScript Reference</h6>
30
32
  <a href="#constructor">Constructor</a><br />
31
33
  <a href="#requirements">Requirements</a><br />
32
- <a href="#attributes">Attributes</a><br />
33
34
  <a href="#properties">Properties</a><br />
34
35
  <a href="#methods">Methods</a><br />
35
36
  </div>
@@ -132,9 +133,9 @@
132
133
  <li><a href="./component.html">Component</a></li>
133
134
  </ul>
134
135
 
135
- <h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
136
+ <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
136
137
  <h5><code>value<i>: boolean</i></code></h5>
137
- <p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>.</p>
138
+ <p>A boolean that indicates if the switch is on or off, the default value is <code>false</code>. Syncs to <code>value</code> attribute.</p>
138
139
  <p>This can be set directly, but it is not recommended as it only triggers the a <code>change</code> event and not a <code>on</code>, <code>off</code> or <code>toggle</code> event as the methods do, so the methods are preferrable.</p>
139
140
 
140
141
  <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
package/docs/kempo-hljs.css ADDED
@@ -0,0 +1 @@
1
+ :root,[theme="light"]{--c_text:#000000;--c_keyword:#0000ff;--c_builtin:#00b0e8;--c_number:#709756;--c_string:#a31515;--c_regex:#914525;--c_function:inherit;--c_comment:#008000;--c_doc:#808080;--c_tag:#7d7d7d;--c_var:#b436bf;--c_attr:#ff0000;--c_section:#a31515;--c_selector:#0000ff;--c_addition:#a31515;--c_deletion:#2b91af;--c_caret:black}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{--c_text:#DCDCDC;--c_keyword:#569CD6;--c_builtin:#4EC9B0;--c_number:#B8D7A3;--c_string:#D69D85;--c_regex:#9A5334;--c_function:inehrit;--c_comment:#57A64A;--c_doc:#608B4E;--c_tag:#9B9B9B;--c_var:#BD63C5;--c_attr:#9CDCFE;--c_section:#ffd700;--c_selector:#569CD6;--c_addition:#144212;--c_deletion:#600;--c_caret:white}.hljs{display:block;overflow-x:auto;color:var(--c_text)}.hljs-keyword,.hljs-literal,.hljs-symbol,.hljs-name,.hljs-link{color:var(--c_keyword)}.hljs-link{text-decoration:underline}.hljs-built_in,.hljs-type{color:var(--c_builtin)}.hljs-number,.hljs-class{color:var(--c_number)}.hljs-string,.hljs-meta-string{color:var(--c_string)}.hljs-regexp,.hljs-template-tag{color:var(--c_regex)}.hljs-subst,.hljs-function,.hljs-title,.hljs-params,.hljs-formula{color:var(--c_function)}.hljs-comment,.hljs-quote{color:var(--c_comment);font-style:italic}.hljs-doctag{color:var(--c_doc)}.hljs-meta,.hljs-meta-keyword,.hljs-tag{color:var(--c_tag)}.hljs-variable,.hljs-template-variable{color:var(--c_var)}.hljs-attr,.hljs-attribute,.hljs-builtin-name{color:var(--c_attr)}.hljs-section{color:var(--c_section)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-bullet,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:var(--c_selector)}.hljs-addition{background-color:var(--c_addition);display:inline-block;width:100%}.hljs-deletion{background-color:var(--c_deletion);display:inline-block;width:100%}
package/docs/media/civic.jpg ADDED
Binary file
package/docs/media/corvette.jpg ADDED
Binary file
package/docs/media/evo.jpg ADDED
Binary file
package/docs/media/gtr.jpg ADDED
Binary file
package/docs/media/nsx.jpg ADDED
Binary file
package/docs/nav.inc.html CHANGED
@@ -22,31 +22,21 @@
22
22
  <h1>Kempo Docs</h1>
23
23
  <menu>
24
24
  <a href="%%root%%" class="h5 pl0 mb">Home</a>
25
- <h5 class="mb0">Styles</h5>
26
25
  <div class="pl mb">
27
- <a href="%%root%%styles/typography.html">Typography</a>
28
- <a href="%%root%%styles/displays-layouts.html">Displays and Layouts</a>
29
- <a href="%%root%%styles/borders-spacing.html">Borders and Spacing</a>
30
- <a href="%%root%%styles/inputs.html">Inputs</a>
31
- <a href="%%root%%styles/buttons.html">Buttons</a>
32
- <a href="%%root%%styles/tables.html">Tables</a>
33
- <a href="%%root%%styles/colors.html">Colors</a>
34
- </div>
35
- <h5 class="mb0">Components</h5>
36
- <div class="pl mb">
37
- <a href="%%root%%components/component.html">Component</a>
38
- <a href="%%root%%components/lazy-component.html">LazyComponent</a>
39
- <a href="%%root%%components/reactivecomponent.html">ReactiveComponent</a>
40
- <a href="%%root%%components/reactivelazy-component.html">ReactiveLazyComponent</a>
26
+ <h3>Base Components</h3>
41
27
  <a href="%%root%%components/focuscapture.html">FocusCapture</a>
42
- <hr />
28
+
29
+ <h3>UI Components</h3>
43
30
  <a href="%%root%%components/accordion.html">Accordion</a>
44
31
  <a href="%%root%%components/card.html">Card</a>
32
+ <a href="%%root%%components/collapsible.html">Collapsible</a>
33
+ <a href="%%root%%components/persistant-collapsible.html">PersistantCollapsible</a>
45
34
  <a href="%%root%%components/content-slider.html">Content Slider</a>
46
35
  <a href="%%root%%components/dialog.html">Dialog</a>
47
36
  <a href="%%root%%components/directory-viewer.html">Directory Viewer</a>
48
37
  <a href="%%root%%components/icon.html">Icon</a>
49
38
  <a href="%%root%%components/import.html">Import</a>
39
+ <a href="%%root%%components/photo-viewer.html">Photo Viewer</a>
50
40
  <a href="%%root%%components/resize.html">Resize</a>
51
41
  <a href="%%root%%components/search.html">Search</a>
52
42
  <a href="%%root%%components/show-more.html">Show More</a>
@@ -63,7 +53,11 @@
63
53
 
64
54
  <h5 class="mb0">Utils</h5>
65
55
  <div class="pl mb">
66
- <a href="%%root%%utils/Server.html">Server</a>
56
+ <a href="%%root%%utils/debounce.html">debounce</a>
57
+ <a href="%%root%%utils/drag.html">drag</a>
58
+ <a href="%%root%%utils/formatTimestamp.html">formatTimestamp</a>
59
+ <a href="%%root%%utils/propConverters.html">propConverters</a>
60
+ <a href="%%root%%utils/watchWindowSize.html">watchWindowSize</a>
67
61
  </div>
68
62
  </menu>
69
63
  </k-side-menu>
package/docs/src/components/Accordion.js ADDED
@@ -0,0 +1,36 @@
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";export default class Accordion extends ShadowComponent{static properties={};getHeader(e){return this.querySelector(`k-accordion-header[for-panel="${e}"]`)}getPanel(e){return this.querySelector(`k-accordion-panel[name="${e}"]`)}openPanel(e){const t=this.querySelector('k-accordion-panel[active="true"]');if(t&&t.name!==e){t.active=!1;const e=this.getHeader(t.name);e&&(e.active=!1)}const o=this.getPanel(e);if(o){o.active=!0,o.transitioning=!0,setTimeout(()=>{o.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const t=this.getHeader(e);t&&(t.active=!0),this.dispatchEvent(new CustomEvent("openpanel",{detail:{panelName:e}}))}}closePanel(e){const t=this.getPanel(e);if(t){t.active=!1,t.transitioning=!0,setTimeout(()=>{t.transitioning=!1},parseInt(getComputedStyle(this).getPropertyValue("--animation_ms")||256));const o=this.getHeader(e);o&&(o.active=!1),this.dispatchEvent(new CustomEvent("closepanel",{detail:{panelName:e}}))}}togglePanel(e){const t=this.getPanel(e);t&&(t.active?this.closePanel(e):this.openPanel(e),this.dispatchEvent(new CustomEvent("togglepanel",{detail:{panelName:e}})))}get activeHeader(){return this.querySelector('k-accordion-header[active="true"]')}get activePanel(){return this.querySelector('k-accordion-panel[active="true"]')}static styles=css`
2
+ :host {
3
+ display: block;
4
+ border: 1px solid var(--c_border);
5
+ border-radius: var(--radius);
6
+ }
7
+ ::slotted(k-accordion-header) {
8
+ border-top: 1px solid var(--c_border);
9
+ }
10
+ ::slotted(k-accordion-header[active="true"]) {
11
+ border-bottom: 1px solid var(--c_border);
12
+ }
13
+ ::slotted(k-accordion-header:first-of-type) {
14
+ border-top: 0;
15
+ }
16
+ ::slotted(k-accordion-header:last-of-type:not([active="true"])) {
17
+ border-bottom: 0;
18
+ }
19
+ `;render(){return html`<slot></slot>`}}export class AccordionHeader extends ShadowComponent{static properties={forPanel:{type:String,reflect:!0,attribute:"for-panel"},active:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.forPanel="",this.active=!1}handleClick=()=>{this.accordion?.togglePanel(this.forPanel)};connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}get accordion(){return this.closest("k-accordion")}static styles=css`
20
+ :host {
21
+ display: block;
22
+ padding: 1rem;
23
+ cursor: pointer;
24
+ }
25
+ `;render(){return html`<slot></slot>`}}export class AccordionPanel extends ShadowComponent{static properties={name:{type:String,reflect:!0},active:{type:Boolean,reflect:!0,converter:boolTrueFalse},transitioning:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.name="",this.active=!1,this.transitioning=!1}get accordion(){return this.closest("k-accordion")}static styles=css`
26
+ :host {
27
+ display: block;
28
+ interpolate-size: allow-keywords;
29
+ height: 0;
30
+ overflow: hidden;
31
+ transition: height var(--animation_ms, 256ms) ease-in-out;
32
+ }
33
+ :host([active="true"]) {
34
+ height: max-content;
35
+ }
36
+ `;render(){return html`<slot></slot>`}}customElements.define("k-accordion",Accordion),customElements.define("k-accordion-header",AccordionHeader),customElements.define("k-accordion-panel",AccordionPanel);
package/docs/src/components/Card.js ADDED
@@ -0,0 +1,37 @@
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class Card extends ShadowComponent{static properties={label:{type:String,reflect:!0}};constructor(){super(),this.label=""}static styles=css`
2
+ :host {
3
+ display: block;
4
+ }
5
+ #card {
6
+ border: 1px solid var(--c_border);
7
+ border-radius: var(--radius);
8
+ margin-bottom: var(--spacer);
9
+ padding: var(--spacer);
10
+ position: relative;
11
+ background-color: var(--c_bg);
12
+ }
13
+ #label {
14
+ position: absolute;
15
+ top: -1.25em;
16
+ left: 1.25em;
17
+ background-color: var(--c_bg);
18
+ border: 1px solid var(--c_border);
19
+ border-radius: var(--radius);
20
+ padding: var(--spacer_h);
21
+ }
22
+ :host([label]) {
23
+ padding-top: calc(1.5 * var(--spacer));
24
+ margin-top: var(--spacer);
25
+ }
26
+ :host([label]) #card {
27
+ padding-top: calc(1.5 * var(--spacer));
28
+ }
29
+ :host(:not([label])) #label {
30
+ display: none;
31
+ }
32
+ `;render(){return html`
33
+ <div id="card">
34
+ <div id="label">${this.label}</div>
35
+ <slot></slot>
36
+ </div>
37
+ `}}window.customElements.define("k-card",Card);
package/docs/src/components/Collapsible.js ADDED
@@ -0,0 +1,41 @@
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./Icon.js";export default class Collapsible extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.opened=!1}handleLabelClick=()=>{this.toggle()};updated(e){super.updated(e),e.has("opened")&&(this.dispatchEvent(new CustomEvent("openedchanged",{detail:this.opened?"open":"close"})),this.dispatchEvent(new CustomEvent(this.opened?"open":"close")))}open(){this.opened=!0}close(){this.opened=!1}toggle(){this.opened=!this.opened,this.dispatchEvent(new CustomEvent("openedtoggled"))}static styles=css`
2
+ :host {
3
+ display: block;
4
+ }
5
+ #labelContainer {
6
+ display: flex;
7
+ cursor: pointer;
8
+ }
9
+ #label {
10
+ flex: 1 1 auto;
11
+ }
12
+ #labelIcon {
13
+ flex: 0 0 none;
14
+ opacity: 0.5;
15
+ transform: rotate(90deg);
16
+ transition: transform var(--animation_ms, 256ms);
17
+ }
18
+ #labelContainer:hover #labelIcon {
19
+ opacity: 1;
20
+ }
21
+ :host([opened="true"]) #labelIcon {
22
+ transform: rotate(-90deg);
23
+ }
24
+ :host(:not([opened="true"])) #content {
25
+ display: none;
26
+ }
27
+ `;render(){return html`
28
+ <div id="labelContainer" @click=${this.handleLabelClick}>
29
+ <div id="label">
30
+ <slot name="label"></slot>
31
+ </div>
32
+ <div id="labelIcon">
33
+ <slot name="labelIcon">
34
+ <k-icon name="chevron-right"></k-icon>
35
+ </slot>
36
+ </div>
37
+ </div>
38
+ <div id="content">
39
+ <slot></slot>
40
+ </div>
41
+ `}}customElements.define("k-collapsible",Collapsible);
package/docs/src/components/ContentSlider.js ADDED
@@ -0,0 +1,44 @@
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolTrueFalse}from"../utils/propConverters.js";import"./Icon.js";export default class ContentSlider extends ShadowComponent{static properties={index:{type:Number,reflect:!0},controls:{type:Boolean,reflect:!0,converter:boolTrueFalse},globalControls:{type:Boolean,reflect:!0,attribute:"global-controls",converter:boolTrueFalse},keyboardControls:{type:Boolean,reflect:!0,attribute:"keyboard-controls",converter:boolTrueFalse},loop:{type:Boolean,reflect:!0,converter:boolTrueFalse}};constructor(){super(),this.index=0,this.controls=!0,this.globalControls=!1,this.keyboardControls=!0,this.loop=!1,this.content=[],this.tabIndex=0}handlePrevClick=()=>{this.previous()};handleNextClick=()=>{this.next()};handleKeydown=t=>{"ArrowLeft"===t.code?(t.preventDefault(),this.dispatchEvent(new CustomEvent("keyleft")),this.previous()):"ArrowRight"===t.code&&(t.preventDefault(),this.dispatchEvent(new CustomEvent("keyright")),this.next())};connectedCallback(){super.connectedCallback(),this.updateContent(),this.setupKeyboardControls()}disconnectedCallback(){super.disconnectedCallback(),this.removeKeyboardControls()}updated(t){super.updated(t),t.has("index")&&(this.validateAndSetIndex(),this.renderContent(),this.dispatchEvent(new CustomEvent("change",{detail:{index:this.index}}))),(t.has("keyboardControls")||t.has("globalControls"))&&(this.removeKeyboardControls(),this.setupKeyboardControls())}updateContent(){this.content=[...this.querySelectorAll(":scope > *")],this.validateAndSetIndex(),this.renderContent()}validateAndSetIndex(){if(0===this.content.length)return;const t=Math.max(Math.min(this.content.length-1,this.index),0);this.index!==t&&(this.index=t)}renderContent(){0!==this.content.length&&(this.innerHTML="",this.content[this.index]&&this.appendChild(this.content[this.index]))}setupKeyboardControls(){this.keyboardControls&&(this.globalControls?window.addEventListener("keydown",this.handleKeydown):this.addEventListener("keydown",this.handleKeydown))}removeKeyboardControls(){window.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("keydown",this.handleKeydown)}previous(){let t=this.index-1;this.loop&&t<0&&(t=this.content.length-1),this.dispatchEvent(new CustomEvent("previous",{detail:{index:t}})),this.index=t}next(){let t=this.index+1;this.loop&&t>=this.content.length&&(t=0),this.dispatchEvent(new CustomEvent("next",{detail:{index:t}})),this.index=t}goto(t){this.dispatchEvent(new CustomEvent("goto",{detail:{index:t}})),this.index=t}static styles=css`
2
+ :host {
3
+ display: block;
4
+ position: relative;
5
+ outline: none;
6
+ }
7
+ #prev,
8
+ #next {
9
+ position: absolute;
10
+ top: 50%;
11
+ transform: translateY(-50%);
12
+ font-size: 2rem;
13
+ }
14
+ #next {
15
+ right: 0;
16
+ }
17
+ :host(:not([controls="true"])) #controls {
18
+ display: none;
19
+ }
20
+ `;render(){return html`
21
+ <div id="content">
22
+ <slot></slot>
23
+ </div>
24
+ <div id="controls">
25
+ <button
26
+ id="prev"
27
+ class="no-btn"
28
+ @click=${this.handlePrevClick}
29
+ >
30
+ <slot name="prev">
31
+ <k-icon name="chevron-left"></k-icon>
32
+ </slot>
33
+ </button>
34
+ <button
35
+ id="next"
36
+ class="no-btn"
37
+ @click=${this.handleNextClick}
38
+ >
39
+ <slot name="next">
40
+ <k-icon name="chevron-right"></k-icon>
41
+ </slot>
42
+ </button>
43
+ </div>
44
+ `}}customElements.define("k-content-slider",ContentSlider);
package/docs/src/components/Dialog.js ADDED
@@ -0,0 +1,113 @@
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";const firstFocusable=t=>t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=t=>{const{target:e}=t,o=e.id||e.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(t),t.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(t),t.defaultPrevented||this.close())};handleKeydown=t=>{27===t.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(t){super.updated(t),t.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const t=this.updateComplete||this.requestUpdate();t&&t.then?t.then(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()}):setTimeout(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const t=firstFocusable(this.shadowRoot);t&&(this.previousFocus=document.activeElement,t.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
2
+ :host {
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ width: 100vw;
7
+ height: 100vh;
8
+ z-index: 100;
9
+ display: none;
10
+ justify-content: center;
11
+ align-items: center;
12
+ }
13
+ :host([opened]) {
14
+ display: flex;
15
+ }
16
+ #overlay {
17
+ position: absolute;
18
+ width: 100%;
19
+ height: 100%;
20
+ top: 0;
21
+ left: 0;
22
+ background-color: var(--c_overlay);
23
+ border: 0px solid transparent;
24
+ box-shadow: 0 0 0 transparent;
25
+ }
26
+ #wrapper {
27
+ position: relative;
28
+ z-index: 1;
29
+ pointer-events: none;
30
+ }
31
+ #dialog {
32
+ display: flex;
33
+ flex-direction: column;
34
+ min-width: var(--min_width, 20rem);
35
+ width: var(--width, fit-content);
36
+ max-width: var(--max_width, calc(100vw - 4rem));
37
+ min-height: var(--min_height, 12rem);
38
+ height: var(--height, fit-content);
39
+ max-height: var(--max_height, calc(100vh - 4rem));
40
+ background-color: var(--c_bg);
41
+ box-shadow: var(--drop_shadow);
42
+ border-radius: var(--radius);
43
+ pointer-events: all;
44
+ }
45
+ #header {
46
+ display: flex;
47
+ align-items: center;
48
+ }
49
+ #header.has-title {
50
+ border-bottom: 1px solid var(--c_border);
51
+ }
52
+ #title {
53
+ flex: 1 1 auto;
54
+ }
55
+ #close {
56
+ border: 0px;
57
+ background: transparent;
58
+ box-shadow: 0 0 0 transparent;
59
+ color: var(--tc);
60
+ }
61
+ #close k-icon {
62
+ pointer-events: none;
63
+ }
64
+ #body {
65
+ flex: 1 1 auto;
66
+ }
67
+ #footer {
68
+ display: flex;
69
+ justify-content: flex-end;
70
+ padding: var(--spacer_h);
71
+ }
72
+ `;render(){return html`
73
+ <button id="overlay" aria-label="Close the Dialog" @click=${this.handleClick}></button>
74
+ <div id="wrapper">
75
+ <div
76
+ id="dialog"
77
+ role="dialog"
78
+ aria-modal="true"
79
+ aria-labelledby="title"
80
+ >
81
+ <div
82
+ id="header"
83
+ class="${this.hasTitle()?"has-title":""}"
84
+ >
85
+ <div id="title">
86
+ <slot name="title"></slot>
87
+ </div>
88
+ ${this.closeBtn?html`
89
+ <button id="close" @click=${this.handleClick}>
90
+ <k-icon name="close"></k-icon>
91
+ </button>
92
+ `:""}
93
+ </div>
94
+ <div id="body">
95
+ <slot></slot>
96
+ </div>
97
+ ${this.cancelText||this.confirmText?html`
98
+ <div id="footer">
99
+ ${this.cancelText?html`
100
+ <button id="cancel" class="${this.cancelClasses}" @click=${this.handleClick}>
101
+ ${this.cancelText}
102
+ </button>
103
+ `:""}
104
+ ${this.confirmText?html`
105
+ <button id="confirm" class="${this.confirmClasses}" @click=${this.handleClick}>
106
+ ${this.confirmText}
107
+ </button>
108
+ `:""}
109
+ </div>
110
+ `:""}
111
+ </div>
112
+ </div>
113
+ `}static create(t="",e={}){!1!==e.closeExisting&&document.querySelectorAll("k-dialog").forEach(t=>t.close());const{removeOnClose:o=!0,closeCallback:s=()=>{}}=e,i=new Dialog;return Object.assign(i,{opened:!0,...e,closeCallback:(...t)=>{o&&i.remove(),s(...t)}}),t instanceof HTMLElement||t instanceof DocumentFragment?i.appendChild(t):t&&(i.innerHTML=t),e.width&&i.style.setProperty("--width",e.width),e.minWidth&&i.style.setProperty("--min_width",e.minWidth),e.maxWidth&&i.style.setProperty("--max_width",e.maxWidth),e.height&&i.style.setProperty("--height",e.height),e.minHeight&&i.style.setProperty("--min_height",e.minHeight),e.maxHeight&&i.style.setProperty("--max_height",e.maxHeight),document.body.appendChild(i),i.open(),i}static confirm(t,e,o={}){const s=o.title||"Confirm";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1),...o})}static alert(t,e,o={}){const s=o.title||"Alert";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static error(t,e,o={}){const s=o.title||"Error";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-danger">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static success(t,e,o={}){const s=o.title||"Success";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-success">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);