kempo-ui 0.0.7 → 0.0.8

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 (58) hide show
  1. package/dist/src/components/Icon.js +1 -1
  2. package/dist/src/components/ShadowComponent.js +1 -1
  3. package/dist/src/components/Tree.js +37 -0
  4. package/docs/components/accordion.html +3 -9
  5. package/docs/components/card.html +3 -9
  6. package/docs/components/collapsible.html +3 -9
  7. package/docs/components/content-slider.html +3 -9
  8. package/docs/components/dialog.html +4 -151
  9. package/docs/components/focus-capture.html +3 -7
  10. package/docs/components/hybrid-component.html +3 -7
  11. package/docs/components/icon.html +1 -6
  12. package/docs/components/import.html +1 -6
  13. package/docs/components/init.js +7 -0
  14. package/docs/components/light-component.html +3 -7
  15. package/docs/components/persistant-collapsible.html +1 -8
  16. package/docs/components/photo-viewer.html +1 -8
  17. package/docs/components/resize.html +3 -9
  18. package/docs/components/shadow-component.html +3 -7
  19. package/docs/components/show-more.html +3 -9
  20. package/docs/components/side-menu.html +1 -6
  21. package/docs/components/sortable.html +3 -7
  22. package/docs/components/split.html +3 -7
  23. package/docs/components/table.html +3 -7
  24. package/docs/components/tableControls.html +3 -7
  25. package/docs/components/tableCustomFields.html +3 -7
  26. package/docs/components/tableFetchRecords.html +3 -7
  27. package/docs/components/tableFieldSortHide.html +3 -7
  28. package/docs/components/tablePagination.html +3 -7
  29. package/docs/components/tableRecordEditing.html +3 -7
  30. package/docs/components/tableRecordFiltering.html +3 -7
  31. package/docs/components/tableRecordHiding.html +3 -7
  32. package/docs/components/tableRecordSearching.html +3 -7
  33. package/docs/components/tableRecordSelection.html +3 -7
  34. package/docs/components/tableRowControls.html +3 -7
  35. package/docs/components/tableSorting.html +3 -7
  36. package/docs/components/tabs.html +3 -9
  37. package/docs/components/tags.html +3 -9
  38. package/docs/components/theme-switcher.html +3 -9
  39. package/docs/components/timestamp.html +3 -9
  40. package/docs/components/toast.html +4 -272
  41. package/docs/components/toggle.html +3 -9
  42. package/docs/components/tree.html +108 -21
  43. package/docs/index.html +10 -6
  44. package/docs/init.js +7 -0
  45. package/docs/src/components/Icon.js +1 -1
  46. package/docs/src/components/ShadowComponent.js +1 -1
  47. package/docs/src/components/Tree.js +37 -0
  48. package/docs/utils/debounce.html +1 -6
  49. package/docs/utils/drag.html +1 -6
  50. package/docs/utils/formatTimestamp.html +1 -6
  51. package/docs/utils/init.js +7 -0
  52. package/docs/utils/propConverters.html +1 -6
  53. package/docs/utils/toTitleCase.html +1 -6
  54. package/docs/utils/watchWindowSize.html +1 -6
  55. package/package.json +1 -1
  56. package/scripts/build.js +12 -2
  57. package/scripts/fix-docs-paths.js +62 -0
  58. package/src/components/Tree.js +64 -72
package/docs/components/toggle.html CHANGED
@@ -5,15 +5,9 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Toggle - Components - Kempo Docs - A Web Components Solution</title>
7
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 ShadowComponent from '../src/components/ShadowComponent.js';
13
- Import.replacements.root = '../';
14
- Icon.pathToIcons = ['../icons'];
15
- ShadowComponent.stylesheetPath = '../kempo.min.css';
16
- </script>
8
+ <link rel="stylesheet" href="../src/kempo-hljs.css" />
9
+ <link rel="stylesheet" href="../styles.css" />
10
+ <script type="module" src="./init.js"></script>
17
11
  </head>
18
12
  <body>
19
13
  <k-import src="../nav.inc.html"></k-import>
package/docs/components/tree.html CHANGED
@@ -7,12 +7,7 @@
7
7
  <link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
8
8
  <link rel="stylesheet" href="../src/kempo-hljs.css" />
9
9
  <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>
10
+ <script type="module" src="./init.js"></script>
16
11
  </head>
17
12
  <body>
18
13
  <k-import src="../nav.inc.html"></k-import>
@@ -23,6 +18,8 @@
23
18
  <div class="m mt0 pl">
24
19
  <h6>Examples</h6>
25
20
  <a href="#basicUsage">Basic Usage</a><br />
21
+ <a href="#depthControl">Controlling Initial Depth</a><br />
22
+ <a href="#customLeafs">Custom Leaf Types</a><br />
26
23
 
27
24
  <h6 class="mt">JavaScript Reference</h6>
28
25
  <a href="#constructor">Constructor</a><br />
@@ -33,18 +30,17 @@
33
30
  </details>
34
31
 
35
32
  <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
36
- <p>Create a tree using the <code>k-tree</code> component. Set your data by setting the <code>data</code> attribute.</p>
33
+ <p>Create a tree using the <code>k-tree</code> component. Set your data by setting the <code>data</code> property.</p>
37
34
  <div class="row -mx mb">
38
35
  <div class="col d-span-6 m-span-12 px">
39
-
36
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"myTree"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</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> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'myTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">name</span>: <span class="hljs-string">'John Doe'</span>,<br /> <span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,<br /> <span class="hljs-attr">active</span>: <span class="hljs-literal">true</span>,<br /> <span class="hljs-attr">hobbies</span>: [<span class="hljs-string">'reading'</span>, <span class="hljs-string">'coding'</span>],<br /> <span class="hljs-attr">address</span>: {<br /> <span class="hljs-attr">street</span>: <span class="hljs-string">'123 Main St'</span>,<br /> <span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span><br /> }<br /> };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
40
37
  </div>
41
38
  <div class="col d-span-6 m-span-12 px">
42
39
  <k-tree id="myTree"></k-tree>
43
40
  <script type="module">
44
41
  import Tree from '../src/components/Tree.js';
45
-
46
42
  const tree = document.getElementById('myTree');
47
- const data = {
43
+ tree.data = {
48
44
  name: 'John Doe',
49
45
  age: 30,
50
46
  active: true,
@@ -54,10 +50,74 @@
54
50
  city: 'New York'
55
51
  }
56
52
  };
57
- tree.data = data;
58
- console.log('Tree element:', tree);
59
- console.log('Tree data:', tree.data);
60
- console.log('Tree.leafs:', Tree.leafs);
53
+ </script>
54
+ </div>
55
+ </div>
56
+
57
+ <h3 id="depthControl"><a href="#depthControl" class="no-link">Controlling Initial Depth</a></h3>
58
+ <p>Use the <code>depth</code> attribute to control how many levels of branches are open by default. This example shows depth set to <code>2</code>:</p>
59
+ <div class="row -mx mb">
60
+ <div class="col d-span-6 m-span-12 px">
61
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"depthTree"</span> <span class="hljs-attr">depth</span>=<span class="hljs-string">"2"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</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> Tree <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'depthTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">company</span>: <span class="hljs-string">'Tech Corp'</span>,<br /> <span class="hljs-attr">departments</span>: {<br /> <span class="hljs-attr">engineering</span>: {<br /> <span class="hljs-attr">frontend</span>: [<span class="hljs-string">'Alice'</span>, <span class="hljs-string">'Bob'</span>],<br /> <span class="hljs-attr">backend</span>: [<span class="hljs-string">'Charlie'</span>, <span class="hljs-string">'Diana'</span>]<br /> },<br /> <span class="hljs-attr">sales</span>: {<br /> <span class="hljs-attr">team</span>: [<span class="hljs-string">'Eve'</span>, <span class="hljs-string">'Frank'</span>]<br /> }<br /> }<br /> };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
62
+ </div>
63
+ <div class="col d-span-6 m-span-12 px">
64
+ <k-tree id="depthTree" depth="2"></k-tree>
65
+ <script type="module">
66
+ import Tree from '../src/components/Tree.js';
67
+ const tree = document.getElementById('depthTree');
68
+ tree.data = {
69
+ company: 'Tech Corp',
70
+ departments: {
71
+ engineering: {
72
+ frontend: ['Alice', 'Bob'],
73
+ backend: ['Charlie', 'Diana']
74
+ },
75
+ sales: {
76
+ team: ['Eve', 'Frank']
77
+ }
78
+ }
79
+ };
80
+ </script>
81
+ </div>
82
+ </div>
83
+
84
+ <h3 id="customLeafs"><a href="#customLeafs" class="no-link">Custom Leaf Types</a></h3>
85
+ <p>You can define custom leaf types to handle specific data types. Create a class that extends <code>TreeLeaf</code>, implement a <code>detect</code> static method that checks for specific properties, and a <code>render</code> method, then register it with <code>Tree.addLeaf()</code>.</p>
86
+ <div class="row -mx mb">
87
+ <div class="col d-span-6 m-span-12 px">
88
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-tree</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"customTree"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tree</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> Tree, { TreeLeaf } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Tree.js'</span>;<br /> <span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/lit-all.min.js'</span>;<br /><br /> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DateLeaf</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">TreeLeaf</span> </span>{<br /> render(){<br /> <span class="hljs-keyword">const</span> { month, day, year } = <span class="hljs-keyword">this</span>.value;<br /> <span class="hljs-keyword">return</span> html`<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>&gt;</span>📅 </span><span class="hljs-subst">${month}</span><span class="xml">/</span><span class="hljs-subst">${day}</span><span class="xml">/</span><span class="hljs-subst">${year}</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>`</span>;<br /> }<br /><br /> <span class="hljs-keyword">static</span> detect = <span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> {<br /> <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">'object'</span> <br /> &amp;&amp; value !== <span class="hljs-literal">null</span><br /> &amp;&amp; <span class="hljs-string">'month'</span> <span class="hljs-keyword">in</span> value <br /> &amp;&amp; <span class="hljs-string">'day'</span> <span class="hljs-keyword">in</span> value <br /> &amp;&amp; <span class="hljs-string">'year'</span> <span class="hljs-keyword">in</span> value;<br /> };<br /> }<br /><br /> Tree.addLeaf(DateLeaf);<br /><br /> <span class="hljs-keyword">const</span> tree = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'customTree'</span>);<br /> tree.data = {<br /> <span class="hljs-attr">event</span>: <span class="hljs-string">'Tech Conference 2025'</span>,<br /> <span class="hljs-attr">startDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">15</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br /> <span class="hljs-attr">endDate</span>: { <span class="hljs-attr">month</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">day</span>: <span class="hljs-number">17</span>, <span class="hljs-attr">year</span>: <span class="hljs-number">2025</span> },<br /> <span class="hljs-attr">location</span>: <span class="hljs-string">'San Francisco'</span>,<br /> <span class="hljs-attr">attendees</span>: <span class="hljs-number">250</span><br /> };<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
89
+ </div>
90
+ <div class="col d-span-6 m-span-12 px">
91
+ <k-tree id="customTree"></k-tree>
92
+ <script type="module">
93
+ import Tree, { TreeLeaf } from '../src/components/Tree.js';
94
+ import { html } from '../src/lit-all.min.js';
95
+
96
+ class DateLeaf extends TreeLeaf {
97
+ render(){
98
+ const { month, day, year } = this.value;
99
+ return html`<span class="tc-warning">📅 ${month}/${day}/${year}</span>`;
100
+ }
101
+
102
+ static detect = value => {
103
+ return typeof value === 'object'
104
+ && value !== null
105
+ && 'month' in value
106
+ && 'day' in value
107
+ && 'year' in value;
108
+ };
109
+ }
110
+
111
+ Tree.addLeaf(DateLeaf);
112
+
113
+ const tree = document.getElementById('customTree');
114
+ tree.data = {
115
+ event: 'Tech Conference 2025',
116
+ startDate: { month: 10, day: 15, year: 2025 },
117
+ endDate: { month: 10, day: 17, year: 2025 },
118
+ location: 'San Francisco',
119
+ attendees: 250
120
+ };
61
121
  </script>
62
122
  </div>
63
123
  </div>
@@ -65,20 +125,47 @@
65
125
  <h2 id="jsRef">JavaScript Reference</h2>
66
126
 
67
127
  <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
68
- <h6>Extends <a href="./component.html">Component</a></h6>
69
- <h5>
70
- <code>new Tree()</code><br />
71
- <code>new Tree(<i>string</i> name)</code>
72
- </h5>
73
-
74
- <h4>Parameters</h4>
128
+ <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
129
+ <h5><code>new Tree()</code></h5>
130
+ <p>Creates a new Tree component instance.</p>
75
131
 
76
132
  <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
77
133
  <ul>
78
134
  <li><a href="./shadow-component.html">ShadowComponent</a></li>
135
+ <li>lit-all.min.js</li>
79
136
  </ul>
80
137
 
81
138
  <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
139
+ <h4><code>data</code> <span class="tc-muted small">Object | Array</span></h4>
140
+ <p>The data to display in the tree. Can be any JavaScript object or array. Nested objects and arrays will be rendered as collapsible branches.</p>
141
+
142
+ <h4><code>depth</code> <span class="tc-muted small">Number</span> <span class="tc-muted small">default: 0</span></h4>
143
+ <p>The number of branch levels that should be open by default. A value of <code>0</code> means all branches are closed, <code>1</code> means the first level is open, <code>2</code> means the first two levels are open, etc. This property is reflected as an attribute.</p>
144
+
145
+ <h4><code>editable</code> <span class="tc-muted small">Boolean</span></h4>
146
+ <p>Whether the tree should be editable. <em>Note: This feature is not yet implemented.</em></p>
147
+
148
+ <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
149
+
150
+ <h4><code>Tree.addLeaf(...leafClasses)</code> <span class="tc-muted small">Static</span></h4>
151
+ <p>Register one or more custom leaf classes. Leaf classes should extend <code>TreeLeaf</code> and implement:</p>
152
+ <ul>
153
+ <li><code>constructor(value)</code> - Optional, TreeLeaf base constructor accepts the value</li>
154
+ <li><code>static detect(value)</code> - Returns <code>true</code> if this leaf type should handle the given value</li>
155
+ <li><code>render()</code> - Returns a Lit template or DOM node that renders the value (without the key)</li>
156
+ </ul>
157
+ <p>Leafs are checked in order of registration (most recently added first).</p>
158
+
159
+ <h3>Default Leaf Types</h3>
160
+ <p>The Tree component comes with built-in leaf types for JavaScript primitives:</p>
161
+ <ul>
162
+ <li><strong>StringLeaf</strong> - Renders strings in green with quotes</li>
163
+ <li><strong>NumberLeaf</strong> - Renders numbers in blue</li>
164
+ <li><strong>BooleanLeaf</strong> - Renders <code>true</code> in green, <code>false</code> in red</li>
165
+ <li><strong>NullLeaf</strong> - Renders <code>null</code> in muted gray</li>
166
+ <li><strong>UndefinedLeaf</strong> - Renders <code>undefined</code> in muted gray</li>
167
+ </ul>
168
+ <p>Objects and arrays that don't match any registered leaf type are rendered as collapsible branches.</p>
82
169
 
83
170
 
84
171
  </main>
package/docs/index.html CHANGED
@@ -4,13 +4,10 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Kempo UI Documentation</title>
7
- <link rel="stylesheet" href="/kempo.min.css">
8
- <link rel="stylesheet" href="/kempo-vars.css">
7
+ <link rel="stylesheet" href="./kempo.min.css">
8
+ <link rel="stylesheet" href="./kempo-vars.css">
9
9
  <link rel="stylesheet" href="./styles.css">
10
- <script type="module">
11
- import Import from './src/components/Import.js';
12
- Import.replacements.root = './';
13
- </script>
10
+ <script type="module" src="./init.js"></script>
14
11
  </head>
15
12
  <body>
16
13
  <k-import src="./nav.inc.html"></k-import>
@@ -152,6 +149,12 @@
152
149
  <p class="tc-muted">Switch component for boolean values with custom styling.</p>
153
150
  </a>
154
151
  </div>
152
+ <div class="span-12 t-span-6 d-span-4 px">
153
+ <a href="./components/tree.html" class="card mb no-link d-b">
154
+ <h3 class="tc-primary">Tree</h3>
155
+ <p class="tc-muted">Hierarchical data visualization with collapsible branches and custom leaf types.</p>
156
+ </a>
157
+ </div>
155
158
  </div>
156
159
 
157
160
  <h2>Base Components</h2>
@@ -215,6 +218,7 @@
215
218
  </a>
216
219
  </div>
217
220
  </div>
221
+ <div style="height:33vh"></div>
218
222
  </main>
219
223
  </body>
220
224
  </html>
package/docs/init.js ADDED
@@ -0,0 +1,7 @@
1
+ import Import from './src/components/Import.js';
2
+ import Icon from './src/components/Icon.js';
3
+ import ShadowComponent from './src/components/ShadowComponent.js';
4
+
5
+ Import.replacements.root = './';
6
+ Icon.pathToIcons = ['./icons'];
7
+ ShadowComponent.stylesheetPath = './kempo.min.css';
package/docs/src/components/Icon.js CHANGED
@@ -7,4 +7,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,unsafeHTML}fro
7
7
  height: 1.35em;
8
8
  vertical-align: middle;
9
9
  }
10
- `;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}static pathToIcons=["/icons"];static fallback='\n\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n\t'}window.customElements.define("k-icon",Icon);
10
+ `;render(){return this.iconContent?html`${unsafeHTML(this.iconContent)}`:html`<slot></slot>`}static pathToIcons=["./icons"];static fallback='\n\t\t<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n\t'}window.customElements.define("k-icon",Icon);
package/docs/src/components/ShadowComponent.js CHANGED
@@ -1 +1 @@
1
- import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="/kempo.min.css";createRenderRoot(){const t=this.attachShadow({mode:"open"}),e=document.createElement("link");e.rel="stylesheet",e.href=this.constructor.stylesheetPath,t.appendChild(e);const n=this.constructor.styles;if(n){const e=document.createElement("style");Array.isArray(n)?e.textContent=n.map(t=>t.cssText||t).join("\n"):e.textContent=n.cssText||n,t.appendChild(e)}const s=document.createElement("div");return s.style.display="contents",t.appendChild(s),s}}
1
+ import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="./kempo.min.css";createRenderRoot(){const t=this.attachShadow({mode:"open"}),e=document.createElement("link");e.rel="stylesheet",e.href=this.constructor.stylesheetPath,t.appendChild(e);const n=this.constructor.styles;if(n){const e=document.createElement("style");Array.isArray(n)?e.textContent=n.map(t=>t.cssText||t).join("\n"):e.textContent=n.cssText||n,t.appendChild(e)}const s=document.createElement("div");return s.style.display="contents",t.appendChild(s),s}}
package/docs/src/components/Tree.js ADDED
@@ -0,0 +1,37 @@
1
+ import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";export default class Tree extends ShadowComponent{static properties={data:{type:Object},depth:{type:Number,reflect:!0},editable:{type:Boolean,converter:boolExists,attribute:"editable",reflect:!0}};constructor(){super(),this.data=null,this.depth=0,this.editable=!1}render(){return this.data?"object"==typeof this.data&&null!==this.data?html`
2
+ <div class="tree-root">
3
+ ${(Array.isArray(this.data)?this.data.map((e,t)=>[t,e]):Object.entries(this.data)).map(([e,t])=>Tree.renderValue(t,e,1,this.depth))}
4
+ </div>
5
+ `:html`
6
+ <div class="tree-root">
7
+ ${Tree.renderValue(this.data,null,0,this.depth)}
8
+ </div>
9
+ `:html`<slot></slot>`}static leafs=[];static addLeaf=(...e)=>{e.forEach(e=>Tree.leafs.unshift(e))};static renderValue(e,t=null,s=0,r=0){const a=Tree.leafs.find(t=>t.detect(e));if(a){const s=document.createElement("span");if(s.className="d-b",null!==t){const e=document.createElement("span");e.className="number"==typeof t?"tc-muted":"",e.textContent=`${t}: `,s.appendChild(e)}const r=new a(e).render();if(r instanceof Node)s.appendChild(r);else{const e=document.createElement("span");render(r,e),s.appendChild(e)}return s}if("object"==typeof e&&null!==e){const a=new TreeBranch;return a.value=e,a.key=t,a.currentDepth=s,a.maxDepth=r,a}return html`<span class="d-b primitive">${null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:""}${e}</span>`}}window.customElements.define("k-tree",Tree);export class TreeBranch extends ShadowComponent{static properties={value:{type:Object},key:{type:String},currentDepth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0}};constructor(){super(),this.value=null,this.key=null,this.currentDepth=0,this.maxDepth=0,this.opened=!1}connectedCallback(){super.connectedCallback(),this.currentDepth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};render(){const e=null!==this.key?`${this.key}: `:"",t=Array.isArray(this.value)?"Array":"Object";return html`
10
+ <div>
11
+ <div class="branch-label" @click=${this.toggle}>
12
+ <k-icon name="chevron-right" class="toggle-icon ${this.opened?"opened":""}"></k-icon>
13
+ ${e}${t}
14
+ </div>
15
+ ${this.opened?html`
16
+ <div class="pl">
17
+ ${this.value?(Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)).map(([e,t])=>Tree.renderValue(t,e,this.currentDepth+1,this.maxDepth)):""}
18
+ </div>
19
+ `:""}
20
+ </div>
21
+ `}static styles=css`
22
+ :host{
23
+ display: block;
24
+ }
25
+ .branch-label{
26
+ cursor: pointer;
27
+ }
28
+ .branch-label:hover{
29
+ background-color: var(--c_bg__alt, #f5f5f5);
30
+ }
31
+ .toggle-icon{
32
+ transition: transform var(--animation_ms, 200ms);
33
+ }
34
+ .toggle-icon.opened{
35
+ transform: rotate(90deg);
36
+ }
37
+ `}window.customElements.define("k-tree-branch",TreeBranch);export class TreeLeaf{constructor(e=null){this.value=e}render(){return html`${this.value}`}static detect=()=>!1}export class StringLeaf extends TreeLeaf{render(){return html`<span class="tc-success">"${this.value}"</span>`}static detect=e=>"string"==typeof e}export class NumberLeaf extends TreeLeaf{render(){return html`<span class="tc-primary">${this.value}</span>`}static detect=e=>"number"==typeof e}export class BooleanLeaf extends TreeLeaf{render(){return html`<span class="${this.value?"tc-success":"tc-danger"}">${this.value}</span>`}static detect=e=>"boolean"==typeof e}export class NullLeaf extends TreeLeaf{render(){return html`<span class="tc-muted">null</span>`}static detect=e=>null===e}export class UndefinedLeaf extends TreeLeaf{render(){return html`<span class="tc-muted">undefined</span>`}static detect=e=>void 0===e}Tree.addLeaf(UndefinedLeaf,NullLeaf,BooleanLeaf,NumberLeaf,StringLeaf);
package/docs/utils/debounce.html CHANGED
@@ -8,12 +8,7 @@
8
8
  <link rel="stylesheet" href="../kempo.min.css" />
9
9
  <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
10
  <link rel="stylesheet" href="../styles.css" />
11
- <script type="module">
12
- import Import from '../src/components/Import.js';
13
- import Icon from '../src/components/Icon.js';
14
- Import.replacements.root = '../';
15
- Icon.pathToIcons = ['../icons'];
16
- </script>
11
+ <script type="module" src="./init.js"></script>
17
12
  </head>
18
13
  <body>
19
14
  <k-import src="../nav.inc.html"></k-import>
package/docs/utils/drag.html CHANGED
@@ -8,12 +8,7 @@
8
8
  <link rel="stylesheet" href="../kempo.min.css" />
9
9
  <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
10
  <link rel="stylesheet" href="../styles.css" />
11
- <script type="module">
12
- import Import from '../src/components/Import.js';
13
- import Icon from '../src/components/Icon.js';
14
- Import.replacements.root = '../';
15
- Icon.pathToIcons = ['../icons'];
16
- </script>
11
+ <script type="module" src="./init.js"></script>
17
12
  </head>
18
13
  <body>
19
14
  <k-import src="../nav.inc.html"></k-import>
package/docs/utils/formatTimestamp.html CHANGED
@@ -8,12 +8,7 @@
8
8
  <link rel="stylesheet" href="../kempo.min.css" />
9
9
  <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
10
  <link rel="stylesheet" href="../styles.css" />
11
- <script type="module">
12
- import Import from '../src/components/Import.js';
13
- import Icon from '../src/components/Icon.js';
14
- Import.replacements.root = '../';
15
- Icon.pathToIcons = ['../icons'];
16
- </script>
11
+ <script type="module" src="./init.js"></script>
17
12
  </head>
18
13
  <body>
19
14
  <k-import src="../nav.inc.html"></k-import>
package/docs/utils/init.js ADDED
@@ -0,0 +1,7 @@
1
+ import Import from '../src/components/Import.js';
2
+ import Icon from '../src/components/Icon.js';
3
+ import ShadowComponent from '../src/components/ShadowComponent.js';
4
+
5
+ Import.replacements.root = '../';
6
+ Icon.pathToIcons = ['../icons'];
7
+ ShadowComponent.stylesheetPath = '../kempo.min.css';
package/docs/utils/propConverters.html CHANGED
@@ -8,12 +8,7 @@
8
8
  <link rel="stylesheet" href="../kempo.min.css" />
9
9
  <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
10
  <link rel="stylesheet" href="../styles.css" />
11
- <script type="module">
12
- import Import from '../src/components/Import.js';
13
- import Icon from '../src/components/Icon.js';
14
- Import.replacements.root = '../';
15
- Icon.pathToIcons = ['../icons'];
16
- </script>
11
+ <script type="module" src="./init.js"></script>
17
12
  </head>
18
13
  <body>
19
14
  <k-import src="../nav.inc.html"></k-import>
package/docs/utils/toTitleCase.html CHANGED
@@ -8,12 +8,7 @@
8
8
  <link rel="stylesheet" href="../kempo.min.css" />
9
9
  <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
10
  <link rel="stylesheet" href="../styles.css" />
11
- <script type="module">
12
- import Import from '../src/components/Import.js';
13
- import Icon from '../src/components/Icon.js';
14
- Import.replacements.root = '../';
15
- Icon.pathToIcons = ['../icons'];
16
- </script>
11
+ <script type="module" src="./init.js"></script>
17
12
  </head>
18
13
  <body>
19
14
  <k-import src="../nav.inc.html"></k-import>
package/docs/utils/watchWindowSize.html CHANGED
@@ -8,12 +8,7 @@
8
8
  <link rel="stylesheet" href="../kempo.min.css" />
9
9
  <link rel="stylesheet" href="../src/kempo-hljs.css" />
10
10
  <link rel="stylesheet" href="../styles.css" />
11
- <script type="module">
12
- import Import from '../src/components/Import.js';
13
- import Icon from '../src/components/Icon.js';
14
- Import.replacements.root = '../';
15
- Icon.pathToIcons = ['../icons'];
16
- </script>
11
+ <script type="module" src="./init.js"></script>
17
12
  </head>
18
13
  <body>
19
14
  <k-import src="../nav.inc.html"></k-import>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo-ui",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "type": "module",
5
5
  "description": "A Lit based web-component library",
6
6
  "main": "index.js",
package/scripts/build.js CHANGED
@@ -48,13 +48,23 @@ process.stdout.write(`0/${allJSFiles.length} = 0%`);
48
48
  const processedJS = {};
49
49
  await Promise.all(allJSFiles.map(async jsFile => {
50
50
  const filename = path.basename(jsFile);
51
+ let code = jsCode[jsFile];
52
+
51
53
  if (filename.endsWith('.min.js')) {
52
54
  // Already minified, just copy
53
- processedJS[jsFile] = jsCode[jsFile];
55
+ processedJS[jsFile] = code;
54
56
  } else {
55
57
  // Minify the file
56
- processedJS[jsFile] = (await minify(jsCode[jsFile])).code;
58
+ code = (await minify(code)).code;
57
59
  }
60
+
61
+ // Convert absolute paths to relative paths for GitHub Pages compatibility
62
+ // This handles paths in ShadowComponent and Icon
63
+ code = code.replace(/stylesheetPath\s*=\s*"\/kempo\.min\.css"/g, 'stylesheetPath="./kempo.min.css"');
64
+ code = code.replace(/pathToIcons\s*=\s*\["\/icons"\]/g, 'pathToIcons=["./icons"]');
65
+
66
+ processedJS[jsFile] = code;
67
+
58
68
  process.stdout.write("\r");
59
69
  complete++;
60
70
  process.stdout.write(`${complete}/${allJSFiles.length} = ${Math.round((complete/allJSFiles.length)*100)}%`);
package/scripts/fix-docs-paths.js ADDED
@@ -0,0 +1,62 @@
1
+ import fs from 'fs/promises';
2
+ import path from 'path';
3
+ import { fileURLToPath } from 'url';
4
+
5
+ const __filename = fileURLToPath(import.meta.url);
6
+ const __dirname = path.dirname(__filename);
7
+
8
+ const docsComponentsDir = path.join(__dirname, '..', 'docs', 'components');
9
+ const docsUtilsDir = path.join(__dirname, '..', 'docs', 'utils');
10
+
11
+ async function fixComponentHtmlFile(filePath) {
12
+ let content = await fs.readFile(filePath, 'utf-8');
13
+ let modified = false;
14
+
15
+ // Replace the inline script block with script src to init.js
16
+ const scriptPattern = /<script type="module">\s*import.*?(ShadowComponent|Import|Icon).*?<\/script>/s;
17
+ if (scriptPattern.test(content)) {
18
+ content = content.replace(
19
+ scriptPattern,
20
+ '<script type="module" src="./init.js"></script>'
21
+ );
22
+ modified = true;
23
+ }
24
+
25
+ // Fix the backtick-n issue in stylesheets
26
+ if (content.includes('`n')) {
27
+ content = content.replace(/`n/g, '\n');
28
+ modified = true;
29
+ }
30
+
31
+ if (modified) {
32
+ await fs.writeFile(filePath, content, 'utf-8');
33
+ console.log(`Fixed: ${path.basename(filePath)}`);
34
+ return true;
35
+ }
36
+ return false;
37
+ }
38
+
39
+ async function fixAllFilesInDirectory(dir, dirName) {
40
+ const files = await fs.readdir(dir);
41
+ let fixedCount = 0;
42
+
43
+ for (const file of files) {
44
+ if (file.endsWith('.html')) {
45
+ const filePath = path.join(dir, file);
46
+ const fixed = await fixComponentHtmlFile(filePath);
47
+ if (fixed) fixedCount++;
48
+ }
49
+ }
50
+
51
+ console.log(`\nFixed ${fixedCount} HTML files in ${dirName}/`);
52
+ }
53
+
54
+ async function fixAllComponentFiles() {
55
+ console.log('Fixing components...');
56
+ await fixAllFilesInDirectory(docsComponentsDir, 'docs/components');
57
+
58
+ console.log('\nFixing utils...');
59
+ await fixAllFilesInDirectory(docsUtilsDir, 'docs/utils');
60
+ }
61
+
62
+ fixAllComponentFiles().catch(console.error);