npm - kempo-ui - Versions diffs - 0.0.2 → 0.0.3 - Mend

kempo-ui 0.0.2 → 0.0.3

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

package/.github/copilot-instructions.md +149 -149
package/.github/workflows/publish-npm.yml +44 -44
package/CONTRIBUTING.md +149 -149
package/README.md +0 -0
package/dist/kempo-vars.css +0 -0
package/dist/src/components/FocusCapture.js +7 -0
package/dist/src/components/Icon.js +10 -0
package/dist/src/components/Import.js +1 -0
package/dist/src/components/ShadowComponent.js +1 -0
package/dist/src/components/SideMenu.js +97 -0
package/dist/src/lit-all.min.js +120 -0
package/docs/components/accordion.html +122 -0
package/docs/components/card.html +91 -0
package/docs/components/component.html +90 -0
package/docs/components/content-slider.html +193 -0
package/docs/components/dialog.html +245 -0
package/docs/components/directory-viewer.html +90 -0
package/docs/components/focus-capture.html +68 -0
package/docs/components/icon.html +161 -0
package/docs/components/import.html +78 -0
package/docs/components/lazy-component.html +84 -0
package/docs/components/reactive-component.html +69 -0
package/docs/components/reactive-lazy-component.html +69 -0
package/docs/components/resize.html +152 -0
package/docs/components/search.html +102 -0
package/docs/components/show-more.html +123 -0
package/docs/components/side-menu.html +168 -0
package/docs/components/sortable.html +96 -0
package/docs/components/split.html +126 -0
package/docs/components/table.html +312 -0
package/docs/components/tableControls.html +77 -0
package/docs/components/tableCustomFields.html +113 -0
package/docs/components/tableFetchRecords.html +114 -0
package/docs/components/tableFieldSortHide.html +75 -0
package/docs/components/tablePagination.html +100 -0
package/docs/components/tableRecordEditing.html +144 -0
package/docs/components/tableRecordFiltering.html +75 -0
package/docs/components/tableRecordHiding.html +80 -0
package/docs/components/tableRecordSearching.html +75 -0
package/docs/components/tableRecordSelection.html +75 -0
package/docs/components/tableRowControls.html +78 -0
package/docs/components/tableSorting.html +73 -0
package/docs/components/tabs.html +163 -0
package/docs/components/tags.html +94 -0
package/docs/components/theme-switcher.html +129 -0
package/docs/components/timestamp.html +86 -0
package/docs/components/toast.html +328 -0
package/docs/components/toggle.html +155 -0
package/docs/dev.config.json +20 -0
package/docs/icons/add.svg +1 -0
package/docs/icons/arrow-back.svg +1 -0
package/docs/icons/arrow-down-double.svg +1 -0
package/docs/icons/arrow-down.svg +1 -0
package/docs/icons/arrow-forward.svg +1 -0
package/docs/icons/arrow-up-double.svg +1 -0
package/docs/icons/arrow-up.svg +1 -0
package/docs/icons/cards.svg +1 -0
package/docs/icons/check.svg +1 -0
package/docs/icons/chevron-left.svg +1 -0
package/docs/icons/chevron-right.svg +1 -0
package/docs/icons/close.svg +2 -0
package/docs/icons/compare.svg +1 -0
package/docs/icons/delete.svg +1 -0
package/docs/icons/drag-handle.svg +1 -0
package/docs/icons/drawing2.svg +124 -0
package/docs/icons/edit.svg +1 -0
package/docs/icons/error.svg +1 -0
package/docs/icons/export-file.svg +1 -0
package/docs/icons/file-text.svg +1 -0
package/docs/icons/file.svg +1 -0
package/docs/icons/filter-off.svg +1 -0
package/docs/icons/filter.svg +1 -0
package/docs/icons/first.svg +1 -0
package/docs/icons/folder-clear.svg +1 -0
package/docs/icons/folder-create.svg +1 -0
package/docs/icons/folder-open.svg +1 -0
package/docs/icons/folder.svg +1 -0
package/docs/icons/hide.svg +1 -0
package/docs/icons/image.svg +1 -0
package/docs/icons/label-add.svg +1 -0
package/docs/icons/label.svg +1 -0
package/docs/icons/last.svg +1 -0
package/docs/icons/menu.svg +1 -0
package/docs/icons/mode-auto.svg +1 -0
package/docs/icons/mode-dark.svg +1 -0
package/docs/icons/mode-light.svg +1 -0
package/docs/icons/open-in-browser.svg +1 -0
package/docs/icons/pause.svg +1 -0
package/docs/icons/play.svg +1 -0
package/docs/icons/refresh.svg +1 -0
package/docs/icons/remove.svg +1 -0
package/docs/icons/save.svg +1 -0
package/docs/icons/search.svg +1 -0
package/docs/icons/settings.svg +1 -0
package/docs/icons/show.svg +1 -0
package/docs/icons/storage.svg +1 -0
package/docs/icons/table-visibility.svg +1 -0
package/docs/icons/tag.svg +1 -0
package/docs/icons/tools.svg +1 -0
package/docs/icons/trash-x.svg +1 -0
package/docs/icons/warning.svg +1 -0
package/docs/index.html +28 -21
package/docs/nav.inc.html +73 -0
package/docs/nav.inc.js +4 -0
package/{config/production.json → docs/prod.config.json} +20 -16
package/docs/src/components/FocusCapture.js +7 -0
package/docs/src/components/HybridComponent.js +1 -0
package/docs/src/components/Icon.js +10 -0
package/docs/src/components/Import.js +1 -0
package/docs/src/components/LightComponent.js +1 -0
package/docs/src/components/ShadowComponent.js +1 -0
package/docs/src/components/SideMenu.js +97 -0
package/docs/src/lit-all.min.js +120 -0
package/docs/src/utils/cli.js +1 -0
package/docs/src/utils/fs-utils.js +1 -0
package/docs/styles.css +6 -0
package/icons/add.svg +1 -0
package/icons/arrow-back.svg +1 -0
package/icons/arrow-down-double.svg +1 -0
package/icons/arrow-down.svg +1 -0
package/icons/arrow-forward.svg +1 -0
package/icons/arrow-up-double.svg +1 -0
package/icons/arrow-up.svg +1 -0
package/icons/cards.svg +1 -0
package/icons/check.svg +1 -0
package/icons/chevron-left.svg +1 -0
package/icons/chevron-right.svg +1 -0
package/icons/close.svg +2 -0
package/icons/compare.svg +1 -0
package/icons/delete.svg +1 -0
package/icons/drag-handle.svg +1 -0
package/icons/drawing2.svg +124 -0
package/icons/edit.svg +1 -0
package/icons/error.svg +1 -0
package/icons/export-file.svg +1 -0
package/icons/file-text.svg +1 -0
package/icons/file.svg +1 -0
package/icons/filter-off.svg +1 -0
package/icons/filter.svg +1 -0
package/icons/first.svg +1 -0
package/icons/folder-clear.svg +1 -0
package/icons/folder-create.svg +1 -0
package/icons/folder-open.svg +1 -0
package/icons/folder.svg +1 -0
package/icons/hide.svg +1 -0
package/icons/image.svg +1 -0
package/icons/label-add.svg +1 -0
package/icons/label.svg +1 -0
package/icons/last.svg +1 -0
package/icons/menu.svg +1 -0
package/icons/mode-auto.svg +1 -0
package/icons/mode-dark.svg +1 -0
package/icons/mode-light.svg +1 -0
package/icons/open-in-browser.svg +1 -0
package/icons/pause.svg +1 -0
package/icons/play.svg +1 -0
package/icons/refresh.svg +1 -0
package/icons/remove.svg +1 -0
package/icons/save.svg +1 -0
package/icons/search.svg +1 -0
package/icons/settings.svg +1 -0
package/icons/show.svg +1 -0
package/icons/storage.svg +1 -0
package/icons/table-visibility.svg +1 -0
package/icons/tag.svg +1 -0
package/icons/tools.svg +1 -0
package/icons/trash-x.svg +1 -0
package/icons/warning.svg +1 -0
package/package.json +2 -2
package/scripts/build.js +109 -138
package/scripts/docs.js +60 -60
package/src/components/Card.js +66 -0
package/src/components/FocusCapture.js +23 -0
package/src/components/HybridComponent.js +40 -40
package/src/components/Icon.js +155 -0
package/src/components/Import.js +104 -0
package/src/components/LightComponent.js +32 -32
package/src/components/ShadowComponent.js +30 -17
package/src/components/SideMenu.js +167 -0
package/src/components/ThemeSwitcher.js +108 -0
package/src/kempo-hljs.css +146 -0
package/src/utils/cli.js +43 -43
package/src/utils/fs-utils.js +41 -41
package/src/utils/propConverters.js +11 -0
package/tests/HybridComponent.browser-test.js +214 -214
package/tests/LightComponent.browser-test.js +169 -169
package/tests/ShadowComponent.browser-test.js +130 -130
package/config/development.json +0 -14
package/docs/components/ShadowComponent.js +0 -1
/package/{docs → dist/src}/components/HybridComponent.js +0 -0
/package/{docs → dist/src}/components/LightComponent.js +0 -0
/package/{docs → dist/src}/utils/cli.js +0 -0
/package/{docs → dist/src}/utils/fs-utils.js +0 -0

package/docs/components/table.html ADDED Viewed

@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 100; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Table</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <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 />
+        <h6 class="mt">JavaScript Reference</h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+      </div>
+    </details>
+    <h3>Description</h3>
+    <p>The <code>&lt;k-table></code> component is used to render data into a <code>&lt;table></code> using JavaScript.</p>
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>In HTML create a <code>&lt;k-table></code>, and then in JavaScript call the <code>setData</code> method passing in an options object containing your data.</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">"basicUsageExample"</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">'basicUsageExample'</span>).setData({<br />    records: [<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"Dustin"</span>,<br />        <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(111) 111-1111"</span>,<br />        <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"dustin@mailserver.com"</span>,<br />        <span class="hljs-attr">gender</span>: <span class="hljs-string">"Male"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"Kayla"</span>,<br />        <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(222) 222-2222"</span>,<br />        <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"kayla@mailserver.com"</span>,<br />        <span class="hljs-attr">gender</span>: <span class="hljs-string">"Female"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"Alexander"</span>,<br />        <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(333) 333-33333"</span>,<br />        <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"alex@mailserver.com"</span>,<br />        <span class="hljs-attr">gender</span>: <span class="hljs-string">"Male"</span><br />      },<br />      {<br />        <span class="hljs-attr">name</span>: <span class="hljs-string">"Amelia"</span>,<br />        <span class="hljs-attr">phoneNumber</span>: <span class="hljs-string">"(444) 444-44444"</span>,<br />        <span class="hljs-attr">emailAddress</span>: <span class="hljs-string">"amelia@mailserver.com"</span>,<br />        <span class="hljs-attr">gender</span>: <span class="hljs-string">"Female"</span><br />      },<br />    ]<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="basicUsageExample"></k-table>
+    <script type="module">
+      document.getElementById('basicUsageExample').setData({
+        records: [
+          {
+            name: "Dustin",
+            phoneNumber: "(111) 111-1111",
+            emailAddress: "dustin@mailserver.com",
+            gender: "Male"
+          },
+          {
+            name: "Kayla",
+            phoneNumber: "(222) 222-2222",
+            emailAddress: "kayla@mailserver.com",
+            gender: "Female"
+          },
+          {
+            name: "Alexander",
+            phoneNumber: "(333) 333-33333",
+            emailAddress: "alex@mailserver.com",
+            gender: "Male"
+          },
+          {
+            name: "Amelia",
+            phoneNumber: "(444) 444-44444",
+            emailAddress: "amelia@mailserver.com",
+            gender: "Female"
+          },
+        ]
+      });
+    </script>
+    <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>
+    </ul>
+    <br />
+    <hr class="my" />
+    <h2>JavaScript Reference</h2>
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h5>
+      <code>new Table()</code><br />
+      <code>new Table(<i>&lt;Array>object</i> options)</code>
+    </h5>
+    <h4>Parameters</h4>
+    <h5><code><i>object</i> options</code></h5>
+    <p>An object containing the initial configuration for the table. The options object can contain the following properties:</p>
+    <ul>
+      <li><code>records</code>: An array of objects representing the records to be shown in the table.</li>
+      <li><code>fields</code>: An array of objects representing the fields of the table, each object must contain a <code>name</code> and a <code>label</code>. If this property is omitted, the fields will be automatically generated from the first 100 records.</li>
+      <li><code>controls</code>: An object containing optional arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. The <code>controls</code> object can contain the optional <code>before</code> and <code>after</code> properties, which are arrays of objects containing the <code>icon</code> (string), <code>action</code> (function), <code>html</code> (string), and <code>render</code> (function). If <code>html</code> is present, it overrides the icon and is rendered in its place. If <code>render</code> is present, it is used to render the control.</li>
+      <li><code>pageSize</code>: The number of records to display per page.</li>
+      <li><code>pageSizeOptions</code>: An array of numbers representing the available page size options.</li>
+    </ul>
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="../utils/string.html"><code>toTitleCase</code> <i>from string.js</i></a></li>
+    </ul>
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>fields<i>: &lt;Array>object</i></code></h5>
+    <p>An array of objects containing a <code>name</code>, <code>label</code>, <code>renderer</code> function, and <code>calculator</code> function that represent the fields to be displayed. The <code>renderer</code> function can be used to customize the display of the field, and the <code>calculator</code> function can be used to calculate the value of the field based on other fields in the record.</p>
+    <h5><code>records<i>: &lt;Array>object</i></code></h5>
+    <p>An array of objects containing the data that will be the records of the table, where the object keys match the field names.</p>
+    <h5><code>controls<i>: object</i></code></h5>
+    <p>An object containing optional arrays of controls to be displayed before and/or after each row, or above and below the table. Each control is defined by an icon name, a callback function, and optionally an HTML string or a render function. The <code>controls</code> object can contain the optional <code>before</code>, <code>after</code>, <code>top</code>, and <code>bottom</code> properties, which are arrays of objects containing the <code>icon</code> (string), <code>action</code> (function), <code>html</code> (string), and <code>render</code> (function). If <code>html</code> is present, it overrides the icon and is rendered in its place. If <code>render</code> is present, it is used to render the control. Controls in the <code>before</code> or <code>after</code> arrays receive the record and index as the 2nd and 3rd parameters in the action function and the renderer function.</p>
+    <h5><code>pageSize<i>: number</i></code></h5>
+    <p>The number of records to display per page.</p>
+    <h5><code>pageSizeOptions<i>: &lt;Array>number</i></code></h5>
+    <p>An array of numbers representing the available page size options.</p>
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>setData(<i>object</i> options)<i>: undefined</i></code></h5>
+    <p>Sets the records and the fields and renders the table. If no fields are provided, they will be automatically generated from the keys of the first 100 records. The options object can contain the following properties:</p>
+    <ul>
+      <li><code>records</code>: An array of objects representing the records to be shown in the table.</li>
+      <li><code>fields</code>: An array of objects representing the fields of the table, each object must contain a <code>name</code> and a <code>label</code>. If this property is omitted, the fields will be automatically generated from the first 100 records.</li>
+      <li><code>filters</code>: An array of filter objects to apply to the records.</li>
+      <li><code>pageSize</code>: The number of records to display per page.</li>
+      <li><code>pageSizeOptions</code>: An array of numbers representing the available page size options.</li>
+      <li><code>currentPage</code>: The current page to display.</li>
+      <li><code>enableSelection</code>: A boolean to enable or disable record selection.</li>
+      <li><code>enablePages</code>: A boolean to enable or disable pagination.</li>
+    </ul>
+    <h5><code>renderFields()<i>: undefined</i></code></h5>
+    <p>Renders the fields as table headers. This is called automatically by setData, you should never have to call it.</p>
+    <h5><code>renderRecords()<i>: undefined</i></code></h5>
+    <p>Renders the records as table rows. This is called automatically by setData, you should never have to call it.</p>
+    <h5><code>addRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Adds a new record to the table.</p>
+    <h5><code>updateRecord(<i>object</i> record, <i>object</i> newData)<i>: undefined</i></code></h5>
+    <p>Updates an existing record with new data.</p>
+    <h5><code>deleteRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Deletes a record from the table.</p>
+    <h5><code>setRecords(<i>Array</i> records)<i>: undefined</i></code></h5>
+    <p>Sets the records for the table and re-renders the rows.</p>
+    <h5><code>setPageSize(<i>number</i> pageSize)<i>: undefined</i></code></h5>
+    <p>Sets the number of records to display per page.</p>
+    <h5><code>setPage(<i>number</i> page)<i>: undefined</i></code></h5>
+    <p>Sets the current page to display.</p>
+    <h5><code>nextPage()<i>: undefined</i></code></h5>
+    <p>Moves to the next page.</p>
+    <h5><code>prevPage()<i>: undefined</i></code></h5>
+    <p>Moves to the previous page.</p>
+    <h5><code>getCurrentPage()<i>: number</i></code></h5>
+    <p>Returns the current page number.</p>
+    <h5><code>getTotalPages()<i>: number</i></code></h5>
+    <p>Returns the total number of pages.</p>
+    <h5><code>getSelectedRecords()<i>: Array</i></code></h5>
+    <p>Returns an array of the currently selected records.</p>
+    <h5><code>deleteSelected()<i>: undefined</i></code></h5>
+    <p>Deletes all currently selected records from the table.</p>
+    <h5><code>selectAllOnPage()<i>: undefined</i></code></h5>
+    <p>Selects all the records on the current page.</p>
+    <h5><code>deselectAllOnPage()<i>: undefined</i></code></h5>
+    <p>Deselects all the records on the current page.</p>
+    <h5><code>allOnPageSelected()<i>: boolean</i></code></h5>
+    <p>Returns <code>true</code> if all the records on the current page are selected, and <code>false</code> if they are not.</p>
+    <h5><code>editRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Enables editing mode for a record.</p>
+    <h5><code>saveEditedRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Saves the changes made to an edited record.</p>
+    <h5><code>cancelEditedRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Cancels the editing mode for a record.</p>
+    <h5><code>recordIsEditing(<i>object</i> record)<i>: boolean</i></code></h5>
+    <p>Returns <code>true</code> if the record is in editing mode, and <code>false</code> if it is not.</p>
+    <h5><code>hideRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Hides a record from the table.</p>
+    <h5><code>showRecord(<i>object</i> record)<i>: undefined</i></code></h5>
+    <p>Shows a hidden record in the table.</p>
+    <h5><code>showAllRecords()<i>: undefined</i></code></h5>
+    <p>Shows all hidden records in the table.</p>
+    <h5><code>addFilter(<i>string</i> field, <i>string</i> condition, <i>any</i> value)<i>: undefined</i></code></h5>
+    <p>Adds a filter to the table.</p>
+    <h5><code>removeFilter(<i>string</i> field, <i>string</i> condition, <i>any</i> value)<i>: undefined</i></code></h5>
+    <p>Removes a filter from the table.</p>
+    <h5><code>removeAllFilters()<i>: undefined</i></code></h5>
+    <p>Removes all filters from the table.</p>
+    <h5><code>search(<i>string</i> term)<i>: undefined</i></code></h5>
+    <p>Searches the records for the specified term.</p>
+    <h5><code>getDisplayedRecords()<i>: Array</i></code></h5>
+    <p>Returns an array of the records currently displayed in the table.</p>
+    <h5><code>getHiddenRecords()<i>: Array</i></code></h5>
+    <p>Returns an array of the hidden records in the table.</p>
+    <h5><code>setupFetchRecords(<i>number</i> totalRecords, <i>function</i> callback)<i>: undefined</i></code></h5>
+    <p>Sets up the table to fetch records dynamically.</p>
+    <h5><code>sortBy(<i>string</i> field, <i>boolean</i> asc)<i>: undefined</i></code></h5>
+    <p>Sorts the records by the specified field in ascending or descending order.</p>
+    <h5><code>setFieldHiddenState(<i>string</i> fieldName, <i>boolean</i> hidden)<i>: undefined</i></code></h5>
+    <p>Sets the hidden state of a field.</p>
+    <h5><code>hideField(<i>string</i> fieldName)<i>: undefined</i></code></h5>
+    <p>Hides a field in the table.</p>
+    <h5><code>showField(<i>string</i> fieldName)<i>: undefined</i></code></h5>
+    <p>Shows a hidden field in the table.</p>
+    <h5><code>reorderFields(<i>Array</i> newOrder)<i>: undefined</i></code></h5>
+    <p>Reorders the fields in the table based on the new order array.</p>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/tableControls.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 10; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../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>
+    <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>
+    <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">
+      document.getElementById('topBottomControlsExample').setRecords(contacts);
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>

package/docs/components/tableCustomFields.html ADDED Viewed

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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="../src/kempo-vars.css" />
+  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="../src/kempo-hljs.css" />`n  <link rel="stylesheet" href="../styles.css" />
+  <script type="module" src="../src/components/Table.js"></script>
+  <script type="module">
+    import Import from '../src/components/Import.js';
+    import Icon from '../src/components/Icon.js';
+    Import.replacements.root = '../';
+    Icon.pathToIcons = ['../icons'];
+  </script>
+  <script>
+    window.contacts = [];
+    function generateContact(){
+      const maleNames = [
+        "Liam", "Noah", "Oliver", "Elijah", "William", "James", "Benjamin",
+        "Lucas", "Henry", "Alexander", "Mason", "Michael", "Ethan", "Daniel",
+        "Jacob", "Logan", "Jackson", "Levi", "Sebastian", "Mateo", "Jack",
+        "Owen", "Theodore", "Aiden", "Samuel", "Joseph", "John", "David",
+        "Wyatt", "Matthew"
+      ];
+      const femaleNames = [
+        "Olivia", "Emma", "Ava", "Sophia", "Isabella", "Mia", "Amelia",
+        "Harper", "Evelyn", "Abigail", "Emily", "Ella", "Elizabeth",
+        "Camila", "Luna", "Sofia", "Avery", "Mila", "Aria", "Scarlett",
+        "Penelope", "Layla", "Chloe", "Victoria", "Madison", "Eleanor",
+        "Grace", "Nora", "Riley", "Zoey"
+      ];
+      const lastNames = [
+        "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller",
+        "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Gonzalez",
+        "Wilson", "Anderson", "Thomas", "Taylor", "Moore", "Jackson", "Martin",
+        "Lee", "Perez", "Thompson", "White", "Harris", "Sanchez", "Clark",
+        "Ramirez", "Lewis", "Robinson"
+      ];
+      const gender = Math.random() > 0.5 ? 'm' : 'f';
+      const firstName = gender === 'm' ? maleNames[Math.floor(Math.random() * maleNames.length)] : femaleNames[Math.floor(Math.random() * femaleNames.length)];
+      const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
+      const name = `${firstName} ${lastName}`;
+      const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@mailserver.com`;
+      const birthday = `${Math.floor(Math.random() * 100) + 1920}-${String(Math.floor(Math.random() * 12) + 1).padStart(2, '0')}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`;
+      const phoneNumber = `(${Math.floor(Math.random() * 900) + 100}) ${Math.floor(Math.random() * 900) + 100}-${Math.floor(Math.random() * 9000) + 1000}`;
+      return { name, email, birthday, phoneNumber, gender };
+    }
+    for (let i = 0; i < 10; i++) {
+      contacts.push(generateContact());
+    };
+  </script>
+</head>
+<body>
+  <k-import src="../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>
+    <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>
+    <k-table id="customFieldsExample"></k-table>
+    <script type="module">
+      document.getElementById('customFieldsExample').setData({
+        records: contacts,
+        fields: [
+          {
+            name: "name",
+            label: "Name",
+            size: 300
+          },
+          {
+            name: 'phoneNumber',
+            label: 'Phone Number'
+          },
+          {
+            name: 'email',
+            label: 'Email Address'
+          },
+          {
+            name: 'birthday',
+            label: 'Birthday'
+          },
+          {
+            name: 'age',
+            label: 'Age',
+            calculator: (record) => {
+              // record.birthday is a string in the format "YYYY-MM-DD"
+              const today = new Date();
+              const birthDate = new Date(record.birthday);
+              let age = today.getFullYear() - birthDate.getFullYear();
+              const monthDifference = today.getMonth() - birthDate.getMonth();
+              if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
+                age--;
+              }
+              return age;
+            }
+          },
+          {
+            name: 'gender',
+            label: 'Gender',
+            formatter: (v) => v==='m'?'Male':'Female' // original value is "m" or "f"
+          }
+        ]
+      });
+    </script>
+  </main>
+  <div style="height: 33.333vh"></div>
+  <script type="module" src="../src/components/Import.js"></script>
+</body>
+</html>