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}/shadow-component.html RENAMED Viewed

@@ -1,17 +1,18 @@
 <!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>ShadowComponent - Base Components - 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" />
+  <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>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></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">ShadowComponent</h1>
   <main>
     <details class="b r mb">
@@ -80,6 +81,6 @@
   </main>
   <div style="height:33vh"></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}/show-more.html RENAMED Viewed

@@ -1,17 +1,18 @@
 <!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>Show More - Components - 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" />
+  <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>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
 </head>
 <body>
-  <k-import src="../nav.inc.html"></k-import>
+  <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <main>
     <h1 class="ta-center">Show More</h1>
     <details class="b r mb">
@@ -118,7 +119,7 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/ShowMore.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/ShowMore.js"></script>
 </body>
 </html>

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

@@ -1,18 +1,18 @@
 <!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>SideMenu - Components - 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" />
+  <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>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></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">SideMenu</h1>
   <main>
     <details class="b r mb">
@@ -149,7 +149,7 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/SideMenu.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/SideMenu.js"></script>
 </body>
 </html>

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

@@ -1,17 +1,18 @@
 <!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>Sortable - Components - 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" />
+  <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>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></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">Sortable</h1>
   <main>
     <details class="b r mb">
@@ -123,7 +124,7 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/Sortable.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Sortable.js"></script>
 </body>
 </html>

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

@@ -1,17 +1,18 @@
 <!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>Split - Components - 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" />
+  <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>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></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">Split</h1>
   <main>
     <details class="b r mb">
@@ -137,8 +138,8 @@
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="../src/components/Import.js"></script>
-  <script type="module" src="../src/components/Card.js"></script>
-  <script type="module" src="../src/components/Split.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Card.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Split.js"></script>
 </body>
 </html>

package/docs/{components → kempo-ui/components}/table.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>Table - Components - 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" />
+  <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>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
-  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Table.js"></script>
   <script>
     window.contacts = [];
@@ -51,7 +51,7 @@
   </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</h1>
   <main>
     <details
@@ -61,18 +61,18 @@
       <div class="m mt0 pl">
         <h6>Examples</h6>
         <a href="#basicUsage">Basic Usage</a><br />
-        <a href="tableCustomFields.html">Custom Fields</a><br />
-        <a href="tableControls.html">Top and Bottom Controls</a><br />
-        <a href="tableRowControls.html">Row Controls</a><br />
-        <a href="tablePagination.html">Pagination</a><br />
-        <a href="tableRecordSelection.html">Record Selection</a><br />
-        <a href="tableRecordEditing.html">Record Editing</a><br />
-        <a href="tableRecordHiding.html">Record Hiding</a><br />
-        <a href="tableRecordFiltering.html">Record Filtering</a><br />
-        <a href="tableRecordSearching.html">Record Searching</a><br />
-        <a href="tableSorting.html">Sorting</a><br />
-        <a href="tableFieldSortHide.html">Field Sorting and Hiding</a><br />
-        <a href="tableFetchRecords.html">Fetching Records</a><br />
+        <a href="/kempo-ui/components/tableCustomFields.html">Custom Fields</a><br />
+        <a href="/kempo-ui/components/tableControls.html">Top and Bottom Controls</a><br />
+        <a href="/kempo-ui/components/tableRowControls.html">Row Controls</a><br />
+        <a href="/kempo-ui/components/tablePagination.html">Pagination</a><br />
+        <a href="/kempo-ui/components/tableRecordSelection.html">Record Selection</a><br />
+        <a href="/kempo-ui/components/tableRecordEditing.html">Record Editing</a><br />
+        <a href="/kempo-ui/components/tableRecordHiding.html">Record Hiding</a><br />
+        <a href="/kempo-ui/components/tableRecordFiltering.html">Record Filtering</a><br />
+        <a href="/kempo-ui/components/tableRecordSearching.html">Record Searching</a><br />
+        <a href="/kempo-ui/components/tableSorting.html">Sorting</a><br />
+        <a href="/kempo-ui/components/tableFieldSortHide.html">Field Sorting and Hiding</a><br />
+        <a href="/kempo-ui/components/tableFetchRecords.html">Fetching Records</a><br />
         <h6 class="mt">JavaScript Reference</h6>
         <a href="#constructor">Constructor</a><br />
         <a href="#requirements">Requirements</a><br />
@@ -122,18 +122,18 @@
     <h3>Examples</h3>
     <ul>
-      <li><a href="tableCustomFields.html">Custom Fields Example</a></li>
-      <li><a href="tableControls.html">Top and Bottom Controls</a></li>
-      <li><a href="tableRowControls.html">Row Controls</a></li>
-      <li><a href="tablePagination.html">Pagination</a></li>
-      <li><a href="tableRecordSelection.html">Record Selection</a></li>
-      <li><a href="tableRecordEditing.html">Record Editing</a></li>
-      <li><a href="tableRecordHiding.html">Record Hiding</a></li>
-      <li><a href="tableRecordFiltering.html">Record Filtering</a></li>
-      <li><a href="tableRecordSearching.html">Record Searching</a></li>
-      <li><a href="tableSorting.html">Sorting</a></li>
-      <li><a href="tableFieldSortHide.html">Field Sorting and Hiding</a></li>
-      <li><a href="tableFetchRecords.html">Fetching Records</a></li>
+      <li><a href="/kempo-ui/components/tableCustomFields.html">Custom Fields Example</a></li>
+      <li><a href="/kempo-ui/components/tableControls.html">Top and Bottom Controls</a></li>
+      <li><a href="/kempo-ui/components/tableRowControls.html">Row Controls</a></li>
+      <li><a href="/kempo-ui/components/tablePagination.html">Pagination</a></li>
+      <li><a href="/kempo-ui/components/tableRecordSelection.html">Record Selection</a></li>
+      <li><a href="/kempo-ui/components/tableRecordEditing.html">Record Editing</a></li>
+      <li><a href="/kempo-ui/components/tableRecordHiding.html">Record Hiding</a></li>
+      <li><a href="/kempo-ui/components/tableRecordFiltering.html">Record Filtering</a></li>
+      <li><a href="/kempo-ui/components/tableRecordSearching.html">Record Searching</a></li>
+      <li><a href="/kempo-ui/components/tableSorting.html">Sorting</a></li>
+      <li><a href="/kempo-ui/components/tableFieldSortHide.html">Field Sorting and Hiding</a></li>
+      <li><a href="/kempo-ui/components/tableFetchRecords.html">Fetching Records</a></li>
     </ul>
     <br />
@@ -304,6 +304,6 @@
   </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}/tableControls.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>Top and Bottom 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,25 +50,25 @@
   </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 - Top and Bottom Controls</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 controls at both the top and bottom. These controls can handle pagination, adding new records, or other actions. They are web components that interact with their parent <code>k-table</code> by accessing its methods and listening for its events.</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">"topBottomControlsExample"</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">"top"</span>&gt;</span><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-export-csv</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-csv</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/ExportCsv.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">'topBottomControlsExample'</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">"topBottomControlsExample"</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">"top"</span>&gt;</span><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-export-csv</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-csv</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/ExportCsv.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">'topBottomControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="topBottomControlsExample">
       <k-tc-export-json slot="top"></k-tc-export-json>
       <k-tc-export-csv></k-tc-export-csv>
     </k-table>
-    <script type="module" src="../src/components/tableControls/ExportJson.js"></script>
-    <script type="module" src="../src/components/tableControls/ExportCsv.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/ExportJson.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/ExportCsv.js"></script>
     <script type="module">
       document.getElementById('topBottomControlsExample').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}/tableCustomFields.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>Custom Fields - 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 - Custom Fields</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>Use the <code>fields</code> property of the options object in <code>setData</code> to define custom fields. This is useful for hiding fields, reordering fields, changing the labels, formatting the output, or creating a calculated field.</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">"customFieldsExample"</span>&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-built_in">document</span>.getElementById(<span class="hljs-string">'customFieldsExample'</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">'phoneNumber'</span>,<br />        <span class="hljs-attr">label</span>: <span class="hljs-string">'Phone Number'</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 Address'</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 />      },<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-comment">// record.birthday is a string in the format "YYYY-MM-DD"</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> <span class="hljs-comment">// original value is "m" or "f"</span><br />      }<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
@@ -105,6 +105,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}/tableFetchRecords.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>Table - Fetch Records - 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,15 +50,15 @@
   </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 - Fetch Records</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 <code>setupFetchRecords</code> function is used to configure the table to fetch records dynamically. It takes two parameters: the total number of records and a function that fetching records. It should be an asynconous function that returns/resolves an array of records that will populate the table.</p>
     <p>In this example, the <code>simulateFetchRecords</code> function generates a specified number of random contact records and resolves the promise after a delay, simulating an asynchronous fetch operation.
     </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">"fetchRecordsExample"</span><br />  <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</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>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/FirstPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PrevPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/NextPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/LastPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PageSelect.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'../src/components/tableControls/PageSize.js'</span>;<br /><br />  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">simulateFetchRecords</span>(<span class="hljs-params">start, count</span>)</span>{<br />    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {<br />      <span class="hljs-keyword">const</span> newRecords = [];<br />      <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i&lt;count; i++){<br />        newRecords.push(generateContact());<br />      }<br />      setTimeout(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>res(newRecords), <span class="hljs-number">1000</span>);<br />    });<br />  }<br /><br />  <span class="hljs-keyword">const</span> $table = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br />  <br />  $table.setRecords(contacts);<br />  $table.setupFetchRecords(<span class="hljs-number">100</span>, simulateFetchRecords);<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">"fetchRecordsExample"</span><br />  <span class="hljs-attr">enable-pages</span>=<span class="hljs-string">"true"</span><br />  <span class="hljs-attr">page-size</span>=<span class="hljs-string">"10"</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>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/kempo-ui/src/components/tableControls/FirstPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/kempo-ui/src/components/tableControls/PrevPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/kempo-ui/src/components/tableControls/NextPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/kempo-ui/src/components/tableControls/LastPage.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/kempo-ui/src/components/tableControls/PageSelect.js'</span>;<br />  <span class="hljs-keyword">import</span> <span class="hljs-string">'/kempo-ui/src/components/tableControls/PageSize.js'</span>;<br /><br />  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">simulateFetchRecords</span>(<span class="hljs-params">start, count</span>)</span>{<br />    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-params">res</span> =&gt;</span> {<br />      <span class="hljs-keyword">const</span> newRecords = [];<br />      <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>; i&lt;count; i++){<br />        newRecords.push(generateContact());<br />      }<br />      setTimeout(<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>res(newRecords), <span class="hljs-number">1000</span>);<br />    });<br />  }<br /><br />  <span class="hljs-keyword">const</span> $table = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'fetchRecordsExample'</span>);<br />  <br />  $table.setRecords(contacts);<br />  $table.setupFetchRecords(<span class="hljs-number">100</span>, simulateFetchRecords);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="fetchRecordsExample"
       enable-pages="true"
@@ -82,12 +82,12 @@
       </div>
     </k-table>
     <script type="module">
-      import '../src/components/tableControls/FirstPage.js';
-      import '../src/components/tableControls/PrevPage.js';
-      import '../src/components/tableControls/NextPage.js';
-      import '../src/components/tableControls/LastPage.js';
-      import '../src/components/tableControls/PageSelect.js';
-      import '../src/components/tableControls/PageSize.js';
+      import '/kempo-ui/src/components/tableControls/FirstPage.js';
+      import '/kempo-ui/src/components/tableControls/PrevPage.js';
+      import '/kempo-ui/src/components/tableControls/NextPage.js';
+      import '/kempo-ui/src/components/tableControls/LastPage.js';
+      import '/kempo-ui/src/components/tableControls/PageSelect.js';
+      import '/kempo-ui/src/components/tableControls/PageSize.js';
       function simulateFetchRecords(start, count){
         return new Promise(res => {
@@ -106,6 +106,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}/tableFieldSortHide.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>Field Sort and Hide - 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 - Field Sort and Hide</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>This example shows how to use the <code>&lt;k-tc-field-sort-hide&gt;</code> component to allow users to show or hide fields in the table, and sort 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">"fieldVisibilityExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-field-sort-hide</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-field-sort-hide</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/FieldSortHide.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">'fieldVisibilityExample'</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">"fieldVisibilityExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-field-sort-hide</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-field-sort-hide</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/FieldSortHide.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">'fieldVisibilityExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table id="fieldVisibilityExample">
       <k-tc-field-sort-hide slot="top"></k-tc-field-sort-hide>
     </k-table>
-    <script type="module" src="../src/components/tableControls/FieldSortHide.js"></script>
+    <script type="module" src="/kempo-ui/src/components/tableControls/FieldSortHide.js"></script>
     <script type="module">
       document.getElementById('fieldVisibilityExample').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>