npm - kempo-ui - Versions diffs - 0.0.13 → 0.0.15 - Mend

kempo-ui 0.0.13 → 0.0.15

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 (181) hide show

package/docs/{components → kempo-ui/components}/tablePagination.html RENAMED Viewed

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pagination - Table - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script type="module" src="../src/components/Table.js"></script>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){
@@ -50,13 +50,13 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Pagination</h1>
   <main>
-    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <a href="/kempo-ui/components/table.html"><h5>Back to Table Component Documentation</h5></a>
         <p>The table component supports pagination, enable it by adding the <code>enable-pages</code> attribute to the <code>k-table</code> element.</p>
     <p>You can optionally set the page size and page size options by setting the <code>page-size</code> and <code>page-size-options</code> attributes respectively. <code>page-size-options</code> must be in the format of an array of numbers (with brackets).</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"paginationExample"</span><br />  <span class="hljs-attr">enable-pages</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />  <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/FirstPage.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/PrevPage.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/NextPage.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/LastPage.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/PageSelect.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/PageSize.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Table.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"paginationExample"</span><br />  <span class="hljs-attr">enable-pages</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</span><br />  <span class="hljs-attr">page-size-options</span>=<span class="hljs-string">"[5,10,25,50]"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f full"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-first-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-first-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-prev-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-prev-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-next-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-next-page</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-last-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-last-page</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-select</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-select</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br />      <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-page-size</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-page-size</span>&gt;</span><br />    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/FirstPage.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/PrevPage.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/NextPage.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/LastPage.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/PageSelect.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/PageSize.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo-ui/src/components/Table.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'paginationExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="paginationExample"
       enable-pages
@@ -80,18 +80,18 @@
         </div>
       </div>
     </k-table>
-    <script type="module" src="../src/components/tableControls/FirstPage.js"></script>
-    <script type="module" src="../src/components/tableControls/PrevPage.js"></script>
-    <script type="module" src="../src/components/tableControls/NextPage.js"></script>
-    <script type="module" src="../src/components/tableControls/LastPage.js"></script>
-    <script type="module" src="../src/components/tableControls/PageSelect.js"></script>
-    <script type="module" src="../src/components/tableControls/PageSize.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/FirstPage.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/PrevPage.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/NextPage.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/LastPage.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/PageSelect.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/PageSize.js"></script>
     <script type="module">
-      import Table from '../src/components/Table.js';
+      import Table from '/kempo-ui/src/components/Table.js';
       document.getElementById('paginationExample').setRecords(contacts);
     </script>
   </main>
   <div style="height: 33.333vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/tableRecordEditing.html RENAMED Viewed

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Record Editing - Table - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script type="module" src="../src/components/Table.js"></script>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){
@@ -50,23 +50,23 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Editing</h1>
   <main>
-    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <a href="/kempo-ui/components/table.html"><h5>Back to Table Component Documentation</h5></a>
     <p>The table component supports record editing. To allow for editing add the "edit" control to the "before" or "after" controls. You may define a "type" on the field, which will tell the table to use a specific editor for that field. If you do not define a "type" it will attempt to find the correct type using the value.</p>
     <p>You can also define a custom editor by adding a generator function to the <code>Table.editors</code> object that will generate an input (or select). This will be global to all tables on the page.</p>
     <p>You can also define a custom editor on a per-field basis by adding an "editor" generator function to the field object. This will override the global editor for that field.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordEditingExample"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-edit</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Edit.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Table.js'</span>;<br />  Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br />    <span class="hljs-keyword">const</span> $input = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"input"</span>);<br />    $input.value = v;<br />    $input.addEventListener(<span class="hljs-string">'change'</span>, () =&gt; {<br />      $input.value = $input.value.replace(<span class="hljs-regexp">/\D/g</span>, <span class="hljs-string">''</span>); <span class="hljs-comment">// Remove all non-digit characters</span><br />      <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">7</span>) {<br />        $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{4})/</span>, <span class="hljs-string">'$1-$2'</span>);<br />      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">10</span>) {<br />        $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{3})(\d{4})/</span>, <span class="hljs-string">'($1) $2-$3'</span>);<br />      } <span class="hljs-keyword">else</span> {<br />        $input.value = v; <span class="hljs-comment">// Reset to default value if not 7 or 10 digits</span><br />      }<br />    });<br />    <span class="hljs-keyword">return</span> $input;<br />  };<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordEditingExample'</span>).setData({<br />    <span class="hljs-attr">records</span>: contacts,<br />    <span class="hljs-attr">fields</span>: [<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"name"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Name"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"email"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Email"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"birthday"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Birthday"</span>,<br />        <span class="hljs-attr">type</span>: <span class="hljs-string">"date"</span>,<br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"phoneNumber"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Phone Number"</span>,<br />        <span class="hljs-attr">type</span>: <span class="hljs-string">"tel"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"age"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Age"</span>,<br />        <span class="hljs-attr">calculator</span>: <span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {<br />          <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br />          <span class="hljs-keyword">const</span> birthDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(record.birthday);<br />          <span class="hljs-keyword">let</span> age = today.getFullYear() - birthDate.getFullYear();<br />          <span class="hljs-keyword">const</span> monthDifference = today.getMonth() - birthDate.getMonth();<br />          <span class="hljs-keyword">if</span> (monthDifference &lt; <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> &amp;&amp; today.getDate() &lt; birthDate.getDate())) {<br />            age--;<br />          }<br />          <span class="hljs-keyword">return</span> age;<br />        }<br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"gender"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Gender"</span>,<br />        <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> v === <span class="hljs-string">"m"</span> ? <span class="hljs-string">"Male"</span> : <span class="hljs-string">"Female"</span>,<br />        <span class="hljs-attr">editor</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br />          <span class="hljs-keyword">const</span> $select = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"select"</span>);<br />          $select.innerHTML = <span class="hljs-string">`<br />            &lt;option value="m"&gt;Male&lt;/option&gt;<br />            &lt;option value="f"&gt;Female&lt;/option&gt;<br />          `</span>;<br />          $select.value = v;<br />          <span class="hljs-keyword">return</span> $select;<br />        }<br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordEditingExample"</span><br />&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-edit</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/Edit.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo-ui/src/components/Table.js'</span>;<br />  Table.editors.tel = <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br />    <span class="hljs-keyword">const</span> $input = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"input"</span>);<br />    $input.value = v;<br />    $input.addEventListener(<span class="hljs-string">'change'</span>, () =&gt; {<br />      $input.value = $input.value.replace(<span class="hljs-regexp">/\D/g</span>, <span class="hljs-string">''</span>); <span class="hljs-comment">// Remove all non-digit characters</span><br />      <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">7</span>) {<br />        $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{4})/</span>, <span class="hljs-string">'$1-$2'</span>);<br />      } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> ($input.value.length === <span class="hljs-number">10</span>) {<br />        $input.value = $input.value.replace(<span class="hljs-regexp">/(\d{3})(\d{3})(\d{4})/</span>, <span class="hljs-string">'($1) $2-$3'</span>);<br />      } <span class="hljs-keyword">else</span> {<br />        $input.value = v; <span class="hljs-comment">// Reset to default value if not 7 or 10 digits</span><br />      }<br />    });<br />    <span class="hljs-keyword">return</span> $input;<br />  };<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordEditingExample'</span>).setData({<br />    <span class="hljs-attr">records</span>: contacts,<br />    <span class="hljs-attr">fields</span>: [<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"name"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Name"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"email"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Email"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"birthday"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Birthday"</span>,<br />        <span class="hljs-attr">type</span>: <span class="hljs-string">"date"</span>,<br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"phoneNumber"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Phone Number"</span>,<br />        <span class="hljs-attr">type</span>: <span class="hljs-string">"tel"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"age"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Age"</span>,<br />        <span class="hljs-attr">calculator</span>: <span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {<br />          <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();<br />          <span class="hljs-keyword">const</span> birthDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(record.birthday);<br />          <span class="hljs-keyword">let</span> age = today.getFullYear() - birthDate.getFullYear();<br />          <span class="hljs-keyword">const</span> monthDifference = today.getMonth() - birthDate.getMonth();<br />          <span class="hljs-keyword">if</span> (monthDifference &lt; <span class="hljs-number">0</span> || (monthDifference === <span class="hljs-number">0</span> &amp;&amp; today.getDate() &lt; birthDate.getDate())) {<br />            age--;<br />          }<br />          <span class="hljs-keyword">return</span> age;<br />        }<br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"gender"</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">"Gender"</span>,<br />        <span class="hljs-attr">formatter</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> v === <span class="hljs-string">"m"</span> ? <span class="hljs-string">"Male"</span> : <span class="hljs-string">"Female"</span>,<br />        <span class="hljs-attr">editor</span>: <span class="hljs-function">(<span class="hljs-params">v</span>) =&gt;</span> {<br />          <span class="hljs-keyword">const</span> $select = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"select"</span>);<br />          $select.innerHTML = <span class="hljs-string">`<br />            &lt;option value="m"&gt;Male&lt;/option&gt;<br />            &lt;option value="f"&gt;Female&lt;/option&gt;<br />          `</span>;<br />          $select.value = v;<br />          <span class="hljs-keyword">return</span> $select;<br />        }<br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="recordEditingExample"
     >
       <k-tc-edit slot="after"></k-tc-edit>
     </k-table>
-    <script type="module" src="../src/components/tableControls/Edit.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/Edit.js"></script>
     <script type="module">
-      import Table from '../src/components/Table.js';
+      import Table from '/kempo-ui/src/components/Table.js';
       Table.editors.tel = (v) => {
         const $input = document.createElement("input");
         $input.value = v;
@@ -136,6 +136,6 @@
     </script>
   </main>
   <div style="height: 33.333vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/tableRecordFiltering.html RENAMED Viewed

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Record Filtering - Table - Kempo Docs</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script type="module" src="../src/components/Table.js"></script>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){
@@ -50,21 +50,21 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Filerting</h1>
   <main>
-    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <a href="/kempo-ui/components/table.html"><h5>Back to Table Component Documentation</h5></a>
     <p>Record filtering is a feature that allows users to filter the records displayed in the table. The table component provides a filter control that can be used to filter records based on the values in the columns. This control uses a Dialog to display the current filters and allows the user to create filters.</p>
     <h3>Basic Filtering (Case-Insensitive)</h3>
     <p>By default, filters are case-insensitive. This means that filtering for "smith" will match "Smith", "SMITH", and "smith".</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordFilteringExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Filters.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordFilteringExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-filters</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-filters</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/Filters.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'recordFilteringExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="recordFilteringExample">
       <k-tc-filters slot="top"></k-tc-filters>
     </k-table>
-    <script type="module" src="../src/components/tableControls/Filters.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/Filters.js"></script>
     <script type="module">
       document.getElementById('recordFilteringExample').setRecords(contacts);
     </script>
@@ -80,6 +80,6 @@
     </script>
   </main>
   <div style="height: 33.333vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/tableRecordHiding.html RENAMED Viewed

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Row Controls - Table - Kempo Docs</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script type="module" src="../src/components/Table.js"></script>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){
@@ -50,28 +50,28 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Hiding</h1>
   <main>
-    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <a href="/kempo-ui/components/table.html"><h5>Back to Table Component Documentation</h5></a>
     <p>The table component supports record hiding. To allow for hiding add the "hide" control to the "before" or "after" controls. There is a built-in "showAll" control that can be added to the "top" or "bottom" controls to reveal previously hidden fields.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordHidingExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hide</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-show-all</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-show-all</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Hide.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/HiddenCount.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/ShowAll.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordHidingExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hide</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hide</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-hidden-count</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-show-all</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-show-all</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/Hide.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/HiddenCount.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/ShowAll.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'recordHidingExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="recordHidingExample">
       <k-tc-hide slot="after"></k-tc-hide>
       <k-tc-hidden-count></k-tc-hidden-count>
       <k-tc-show-all></k-tc-show-all>
     </k-table>
-    <script type="module" src="../src/components/tableControls/Hide.js"></script>
-    <script type="module" src="../src/components/tableControls/HiddenCount.js"></script>
-    <script type="module" src="../src/components/tableControls/ShowAll.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/Hide.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/HiddenCount.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/ShowAll.js"></script>
     <script type="module">
       document.getElementById('recordHidingExample').setRecords(contacts);
     </script>
   </main>
   <div style="height: 33.333vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/tableRecordSearching.html RENAMED Viewed

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Record Searching - Table - Kempo Docs</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script type="module" src="../src/components/Table.js"></script>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){
@@ -50,23 +50,23 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Searching</h1>
   <main>
-    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <a href="/kempo-ui/components/table.html"><h5>Back to Table Component Documentation</h5></a>
     <p>The search control (aka quick filter) is a feature that allows users to filter the records displayed in the table. The control is a search input that can be used to filter records based on the values in the columns.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quickFilterExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 20rem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/Search.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'quickFilterExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"quickFilterExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-search</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 20rem"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-search</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/Search.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'quickFilterExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="quickFilterExample">
       <k-tc-search slot="top" style="width: 20rem"></k-tc-search>
     </k-table>
-    <script type="module" src="../src/components/tableControls/Search.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/Search.js"></script>
     <script type="module">
       document.getElementById('quickFilterExample').setRecords(contacts);
     </script>
   </main>
   <div style="height: 33.333vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/tableRecordSelection.html RENAMED Viewed

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Record Selection - Table - Kempo Docs - A Web Components Solution</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script type="module" src="../src/components/Table.js"></script>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){
@@ -50,23 +50,23 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Record Selection</h1>
   <main>
-    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <a href="/kempo-ui/components/table.html"><h5>Back to Table Component Documentation</h5></a>
     <p>The table component supports record selection. You can enable selection by setting the <code>enable-selection</code> attribute to <code>true</code>. This will add a checkbox to each row and a "Select All" checkbox to the header.</p>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span><br />  <span class="hljs-attr">enable-selection</span><br />&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../src/components/Table.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span><br />  <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span><br />  <span class="hljs-attr">enable-selection</span><br />&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'/kempo-ui/src/components/Table.js'</span>;<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="recordSelectionExample"
       enable-selection
     ></k-table>
     <script type="module">
-      import Table from '../src/components/Table.js';
+      import Table from '/kempo-ui/src/components/Table.js';
       document.getElementById('recordSelectionExample').setRecords(contacts);
     </script>
   </main>
   <div style="height: 33.333vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/tableRowControls.html RENAMED Viewed

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Row Controls - Table - Kempo Docs</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script type="module" src="../src/components/Table.js"></script>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){
@@ -50,12 +50,12 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Row Controls</h1>
   <main>
-    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"export-file"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-record</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/ExportJson.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/components/tableControls/DeleteRecord.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <a href="/kempo-ui/components/table.html"><h5>Back to Table Component Documentation</h5></a>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rowControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"before"</span> <span class="hljs-attr">max-width</span>=<span class="hljs-string">"40"</span>&gt;</span><br />    <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"export-file"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br />  <span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"after"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-record</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/ExportJson.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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> <span class="hljs-attr">src</span>=<span class="hljs-string">"/kempo-ui/src/components/tableControls/DeleteRecord.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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-built_in">document</span>.getElementById(<span class="hljs-string">'rowControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <p>The table component can display controls before or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function.</p>
     <k-table id="rowControlsExample">
       <k-tc-export-json slot="before" max-width="40">
@@ -63,13 +63,13 @@
       </k-tc-export-json>
       <k-tc-delete-record slot="after"></k-tc-delete-record>
     </k-table>
-    <script type="module" src="../src/components/tableControls/ExportJson.js"></script>
-    <script type="module" src="../src/components/tableControls/DeleteRecord.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/ExportJson.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/DeleteRecord.js"></script>
     <script type="module">
       document.getElementById('rowControlsExample').setRecords(contacts);
     </script>
   </main>
   <div style="height: 33.333vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/tableSorting.html RENAMED Viewed

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <base href="/kempo-ui/">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sorting - Table - Kempo Docs</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script type="module" src="../src/components/Table.js"></script>
+  <link rel="stylesheet" href="kempo-vars.css" />
+  <link rel="stylesheet" href="kempo.min.css" />
+  <link rel="stylesheet" href="kempo-hljs.css" />
+  <link rel="stylesheet" href="styles.css" />
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
   <script>
     window.contacts = [];
     function generateContact(){
@@ -50,11 +50,11 @@
   </script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Table - Sorting</h1>
   <main>
-    <a href="./table.html"><h5>Back to Table Component Documentation</h5></a>
+    <a href="/kempo-ui/components/table.html"><h5>Back to Table Component Documentation</h5></a>
     <p>The sorting feature allows users to sort the records displayed in the table by clicking on the column headers. This is enabled by setting the <code>enable-sorting="true"</code> attribute.</p>
     <p>Once enabled the user can sort the records by clicking on the fields.</p>
@@ -65,6 +65,6 @@
     </script>
   </main>
   <div style="height: 33.333vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
 </body>
 </html>