From f464d27b8483d91d10b835a1eec3e96a194ca59d Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 9 Jun 2024 17:15:23 +0530
Subject: [PATCH] added scoped slots and sorting composable

---
 docs/pages/playground.vue     |  57 ++++++--
 lib/KTable/KTable.vue         | 234 --------------------------------
 lib/KTable/KTableGridItem.vue |  35 ++---
 lib/KTable/index.vue          | 247 ++++++++++++++++++++++++++++++++++
 lib/KTable/useSorting.js      |  55 ++++++++
 lib/KThemePlugin.js           |   2 +-
 lib/__tests__/KTable.spec.js  |   2 +-
 7 files changed, 368 insertions(+), 264 deletions(-)
 delete mode 100644 lib/KTable/KTable.vue
 create mode 100644 lib/KTable/index.vue
 create mode 100644 lib/KTable/useSorting.js

diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 0d9e6f643..6dee4f386 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -21,7 +21,39 @@
         { text: 'Level 2 ', link: { path: '#' } },
       ]"
     /> -->
-    <KTable :headers="tableHeaders" :rows="tableRows" caption="User Information Table" />
+    <h1>KTable Component Example</h1>
+    <h2>Sortable Table</h2>
+    <KTable
+      :headers="headers"
+      :rows="rows"
+      caption="Sortable Table"
+      :useLocalSorting="true"
+      sortable
+    >
+      <template #header="{ header, index }">
+        <span>{{ header.label }} (Custom)</span>
+      </template>
+      <template #cell="{ content, rowIndex, colIndex }">
+        <span v-if="colIndex === 1">{{ content }} years old</span>
+        <span v-else>{{ content }}</span>
+      </template>
+    </KTable>
+
+    <h2>Non-Sortable Table</h2>
+    <KTable
+      :headers="headers"
+      :rows="rows"
+      caption="Non-Sortable Table"
+      :sortable="false"
+    >
+      <template #header="{ header, index }">
+        <span>{{ header.label }} (Non-Sortable)</span>
+      </template>
+      <template #cell="{ content, rowIndex, colIndex }">
+        <span v-if="colIndex === 2">{{ content }} (City)</span>
+        <span v-else>{{ content }}</span>
+      </template>
+    </KTable>
 
 
     <!-- Play around with your component here: -->
@@ -34,11 +66,11 @@
 <script>
 
   /*
-     Playground is a Vue component too,
-     so you can also use `data`, `methods`, etc.
-     as usual if helpful
-   */
-  import KTable from '../../lib/KTable/KTable.vue';
+       Playground is a Vue component too,
+       so you can also use `data`, `methods`, etc.
+       as usual if helpful
+     */
+  import KTable from '../../lib/KTable';
 
   export default {
     name: 'Playground',
@@ -47,17 +79,18 @@
     },
     data() {
       return {
-        tableHeaders: [
+        headers: [
           { label: 'Name', dataType: 'string' },
           { label: 'Age', dataType: 'numeric' },
-          { label: 'Birth Date', dataType: 'date' },
           { label: 'City', dataType: 'string' },
+          { label: 'Joined', dataType: 'date' },
           { label: 'Misc', dataType: 'others' },
         ],
-        tableRows: [
-          ['Alice', 25, '1999-05-12', 'New York', 'Example'],
-          ['Bob', 30, '1994-02-22', 'San Francisco', 'Example'],
-          ['Charlie', 35, '1989-12-15', 'Chicago', 'Example'],
+        rows: [
+          ['John Doe', 28, 'New York', '2022-01-15', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18', 'N/A'],
         ],
       };
     },
diff --git a/lib/KTable/KTable.vue b/lib/KTable/KTable.vue
deleted file mode 100644
index 9eed2194e..000000000
--- a/lib/KTable/KTable.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<template>
-
-  <div class="k-table">
-    <table>
-      <caption v-if="caption">
-        {{ caption }}
-      </caption>
-      <thead>
-        <tr>
-          <th
-            v-for="(header, index) in headers"
-            :key="index"
-            tabindex="0"
-            @click="handleSort(index)"
-            @keydown="handleKeydown($event, -1, index)"
-          >
-            {{ header.label }}
-            <span v-if="header.dataType !== 'others'" class="sort-icon">
-              <span v-if="sortKey === index && sortOrder === 'asc'">⬆️</span>
-              <span v-else-if="sortKey === index && sortOrder === 'desc'">⬇️</span>
-              <span v-else>⬍</span>
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, rowIndex) in sortedRows" :key="rowIndex">
-          <KTableGridItem
-            v-for="(cell, cellIndex) in row"
-            :key="cellIndex"
-            :content="cell"
-            :align="headers[cellIndex].dataType === 'numeric' ? 'right' : 'left'"
-            :rowIndex="rowIndex"
-            :cellIndex="cellIndex"
-            @keydown="handleKeydown($event, rowIndex, cellIndex)"
-          />
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-</template>
-
-
-<script>
-
-  import KTableGridItem from './KTableGridItem.vue';
-
-  export default {
-    name: 'KTable',
-    components: {
-      KTableGridItem,
-    },
-    props: {
-      headers: {
-        type: Array,
-        required: true,
-      },
-      rows: {
-        type: Array,
-        required: true,
-      },
-      caption: {
-        type: String,
-        required: false,
-        default: null,
-      },
-    },
-    data() {
-      return {
-        sortKey: null,
-        sortOrder: 'asc',
-      };
-    },
-    computed: {
-      sortedRows() {
-        if (this.sortKey === null) return this.rows;
-
-        const sortedRows = [...this.rows];
-        const sortHeader = this.headers[this.sortKey];
-
-        if (sortHeader.dataType === 'numeric') {
-          sortedRows.sort((a, b) => a[this.sortKey] - b[this.sortKey]);
-        } else if (sortHeader.dataType === 'string' || sortHeader.dataType === 'date') {
-          sortedRows.sort((a, b) => a[this.sortKey].localeCompare(b[this.sortKey]));
-        }
-
-        if (this.sortOrder === 'desc') {
-          sortedRows.reverse();
-        }
-
-        return sortedRows;
-      },
-    },
-    methods: {
-      handleSort(index) {
-        const clickedElement = event.target.tagName.toLowerCase();
-        if (clickedElement !== 'th' || this.headers[index].dataType === 'others') return;
-
-        if (this.sortKey === index) {
-          this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-        } else {
-          this.sortKey = index;
-          this.sortOrder = 'asc';
-        }
-      },
-      handleKeydown(event, rowIndex, cellIndex) {
-        const key = event.key;
-        const totalRows = this.rows.length;
-        const totalCols = this.headers.length;
-
-        let nextRowIndex = rowIndex;
-        let nextCellIndex = cellIndex;
-
-        switch (key) {
-          case 'ArrowUp':
-            if (rowIndex === 0) {
-              this.focusHeader(cellIndex);
-              return;
-            } else if (rowIndex > 0) {
-              nextRowIndex = rowIndex - 1;
-            } else {
-              return;
-            }
-            break;
-          case 'ArrowDown':
-            if (rowIndex === -1) {
-              nextRowIndex = 0;
-            } else {
-              nextRowIndex = (rowIndex + 1) % totalRows;
-            }
-            break;
-          case 'ArrowLeft':
-            if (rowIndex === -1) {
-              nextCellIndex = cellIndex > 0 ? cellIndex - 1 : totalCols - 1;
-            } else if (cellIndex > 0) {
-              nextCellIndex = cellIndex - 1;
-            } else {
-              nextCellIndex = totalCols - 1;
-              nextRowIndex = rowIndex > 0 ? rowIndex - 1 : -1; // Move to the header row if needed
-            }
-            break;
-          case 'ArrowRight':
-            if (rowIndex === -1) {
-              if (cellIndex < totalCols - 1) {
-                nextCellIndex = cellIndex + 1;
-              } else {
-                nextRowIndex = 0;
-                nextCellIndex = 0;
-              }
-            } else if (cellIndex < totalCols - 1) {
-              nextCellIndex = cellIndex + 1;
-            } else {
-              nextCellIndex = 0;
-              nextRowIndex = (rowIndex + 1) % totalRows;
-            }
-            break;
-          case 'Enter':
-            this.handleSort(cellIndex);
-            break;
-          default:
-            return;
-        }
-
-        this.focusCell(nextRowIndex, nextCellIndex);
-        event.preventDefault();
-      },
-
-      focusHeader(cellIndex) {
-        const nextHeader = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
-        if (nextHeader) {
-          nextHeader.focus();
-        }
-      },
-      focusCell(rowIndex, cellIndex) {
-        let nextCell;
-        if (rowIndex === -1) {
-          nextCell = this.$el.querySelector(`thead th:nth-child(${cellIndex + 1})`);
-        } else {
-          nextCell = this.$el.querySelector(
-            `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${cellIndex + 1})`
-          );
-        }
-        if (nextCell) {
-          nextCell.focus();
-        }
-      },
-    },
-  };
-
-</script>
-
-
-<style scoped>
-.k-table {
-  margin: 20px;
-}
-
-.k-table table {
-  width: 100%;
-  border: 2px solid #ccc;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-.k-table th,
-.k-table td {
-  padding: 15px;
-  text-align: left;
-  position: relative;
-}
-
-.k-table th {
-  background-color: #f2f2f2;
-  border-bottom: 2px solid #ccc;
-  cursor: pointer;
-}
-
-.k-table td {
-  border-bottom: 1px solid #eee;
-}
-
-.k-table th:focus,
-.k-table td:focus {
-  outline: 2px solid #007bff;
-  outline-offset: -2px;
-}
-
-.sort-icon {
-  margin-left: 8px;
-}
-
-
-</style>
\ No newline at end of file
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 4e7eec564..fe3264eb3 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -1,7 +1,9 @@
 <template>
 
-  <td :style="{ textAlign: align }" tabindex="0" @keydown="onKeydown">
-    {{ content }}
+  <td :style="{ textAlign: textAlign }" tabindex="0" @keydown="onKeydown">
+    <slot :content="content">
+      {{ content }}
+    </slot>
   </td>
 
 </template>
@@ -16,22 +18,27 @@
         type: [String, Number],
         required: true,
       },
-      align: {
+      dataType: {
         type: String,
-        default: 'left',
+        default: 'string',
       },
       rowIndex: {
         type: Number,
         required: true,
       },
-      cellIndex: {
+      colIndex: {
         type: Number,
         required: true,
       },
     },
+    computed: {
+      textAlign() {
+        return this.dataType === 'numeric' ? 'right' : 'left';
+      },
+    },
     methods: {
       onKeydown(event) {
-        this.$emit('keydown', event, this.rowIndex, this.cellIndex);
+        this.$emit('keydown', event, this.rowIndex, this.colIndex);
       },
     },
   };
@@ -40,14 +47,10 @@
 
 
 <style scoped>
-  td {
-    padding: 15px;
-    text-align: left;
-    border-bottom: 1px solid #eee;
-  }
-
-  td:focus {
-    outline: 2px solid #007bff;
-    outline-offset: -2px;
-  }
+td:focus {
+  outline: 2px solid #007bff;
+  outline-offset: -2px;
+  z-index: 1;
+  position: relative;
+}
 </style>
\ No newline at end of file
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
new file mode 100644
index 000000000..ab8a8a22e
--- /dev/null
+++ b/lib/KTable/index.vue
@@ -0,0 +1,247 @@
+<template>
+
+  <div class="k-table">
+    <table>
+      <caption v-if="caption">
+        {{ caption }}
+      </caption>
+      <thead>
+        <tr>
+          <th
+            v-for="(header, index) in headers"
+            :key="index"
+            tabindex="0"
+            :aria-sort="sortable ? getAriaSort(index) : null"
+            :class="{ sortable: sortable && header.dataType !== DATA_TYPE_OTHERS }"
+            @click="sortable ? handleSort(index) : null"
+            @keydown="handleKeydown($event, -1, index)"
+          >
+            <slot name="header" :header="header" :index="index">
+              {{ header.label }}
+            </slot>
+            <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
+              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" /></span>
+              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" /></span>
+              <span v-else>⬍</span>
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, rowIndex) in finalRows" :key="rowIndex">
+          <KTableGridItem
+            v-for="(col, colIndex) in row"
+            :key="colIndex"
+            :content="col"
+            :dataType="headers[colIndex].dataType"
+            :rowIndex="rowIndex"
+            :colIndex="colIndex"
+            @keydown="handleKeydown($event, rowIndex, colIndex)"
+          >
+            <template #default="slotProps">
+              <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex">
+                {{ slotProps.content }}
+              </slot>
+            </template>
+          </KTableGridItem>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref, computed } from '@vue/composition-api';
+  import useSorting, { SORT_ORDER_ASC, SORT_ORDER_DESC, DATA_TYPE_OTHERS } from './useSorting';
+  import KTableGridItem from './KTableGridItem.vue';
+
+  export default {
+    name: 'KTable',
+    components: {
+      KTableGridItem,
+    },
+    setup(props) {
+      const headers = ref(props.headers);
+      const rows = ref(props.rows);
+      const useLocalSorting = ref(props.useLocalSorting);
+
+      const { sortKey, sortOrder, sortedRows, handleSort, getAriaSort } = useSorting(
+        headers,
+        rows,
+        useLocalSorting
+      );
+
+      const finalRows = computed(() => {
+        if (props.sortable) {
+          return useLocalSorting.value ? sortedRows.value : rows.value;
+        } else {
+          return rows.value;
+        }
+      });
+
+      return {
+        sortKey,
+        sortOrder,
+        finalRows,
+        handleSort,
+        getAriaSort,
+        SORT_ORDER_ASC,
+        SORT_ORDER_DESC,
+        DATA_TYPE_OTHERS,
+      };
+    },
+    props: {
+      headers: {
+        type: Array,
+        required: true,
+        validator: function(value) {
+          return value.every(
+            header =>
+              ['label', 'dataType'].every(key => key in header) &&
+              ['string', 'numeric', 'date', 'others'].includes(header.dataType)
+          );
+        },
+      },
+      rows: {
+        type: Array,
+        required: true,
+      },
+      caption: {
+        type: String,
+        required: true,
+        default: 'Information',
+      },
+      useLocalSorting: {
+        type: Boolean,
+        default: false,
+      },
+      sortable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    methods: {
+      handleKeydown(event, rowIndex, colIndex) {
+        const key = event.key;
+        const totalRows = this.rows.length;
+        const totalCols = this.headers.length;
+
+        let nextRowIndex = rowIndex;
+        let nextColIndex = colIndex;
+
+        switch (key) {
+          case 'ArrowUp':
+            if (rowIndex === 0) {
+              this.focusHeader(colIndex);
+              return;
+            } else if (rowIndex > 0) {
+              nextRowIndex = rowIndex - 1;
+            } else {
+              return;
+            }
+            break;
+          case 'ArrowDown':
+            if (rowIndex === -1) {
+              nextRowIndex = 0;
+            } else {
+              nextRowIndex = (rowIndex + 1) % totalRows;
+            }
+            break;
+          case 'ArrowLeft':
+            if (rowIndex === -1) {
+              nextColIndex = colIndex > 0 ? colIndex - 1 : totalCols - 1;
+            } else if (colIndex > 0) {
+              nextColIndex = colIndex - 1;
+            } else {
+              nextColIndex = totalCols - 1;
+              nextRowIndex = rowIndex > 0 ? rowIndex - 1 : -1;
+            }
+            break;
+          case 'ArrowRight':
+            if (rowIndex === -1) {
+              if (colIndex < totalCols - 1) {
+                nextColIndex = colIndex + 1;
+              } else {
+                nextRowIndex = 0;
+                nextColIndex = 0;
+              }
+            } else if (colIndex < totalCols - 1) {
+              nextColIndex = colIndex + 1;
+            } else {
+              nextColIndex = 0;
+              nextRowIndex = (rowIndex + 1) % totalRows;
+            }
+            break;
+          case 'Enter':
+            if (rowIndex === -1 && this.sortable) {
+              this.handleSort(colIndex);
+            }
+            break;
+          default:
+            return;
+        }
+
+        this.focusCell(nextRowIndex, nextColIndex);
+        event.preventDefault();
+      },
+      focusHeader(colIndex) {
+        const nextHeader = this.$el.querySelector(`thead th:nth-child(${colIndex + 1})`);
+        if (nextHeader) {
+          nextHeader.focus();
+        }
+      },
+      focusCell(rowIndex, colIndex) {
+        let nextCell;
+        if (rowIndex === -1) {
+          nextCell = this.$el.querySelector(`thead th:nth-child(${colIndex + 1})`);
+        } else {
+          nextCell = this.$el.querySelector(
+            `tbody tr:nth-child(${rowIndex + 1}) td:nth-child(${colIndex + 1})`
+          );
+        }
+        if (nextCell) {
+          nextCell.focus();
+        }
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+.k-table {
+  margin: 20px;
+}
+
+.k-table table {
+  width: 100%;
+  border: 2px solid #ccc;
+  border-collapse: collapse;
+}
+
+.k-table th,
+.k-table td {
+  padding: 10px;
+  border: none;
+}
+
+.k-table th {
+  cursor: pointer;
+}
+
+.k-table th.sortable {
+  cursor: pointer;
+}
+
+.k-table td:focus,
+.k-table th:focus {
+  outline: 2px solid #007bff;
+  outline-offset: -2px;
+  z-index: 1;
+  position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/lib/KTable/useSorting.js b/lib/KTable/useSorting.js
new file mode 100644
index 000000000..97cbab03d
--- /dev/null
+++ b/lib/KTable/useSorting.js
@@ -0,0 +1,55 @@
+import { ref, computed } from '@vue/composition-api';
+
+export const SORT_ORDER_ASC = 'asc';
+export const SORT_ORDER_DESC = 'desc';
+export const DATA_TYPE_STRING = 'string';
+export const DATA_TYPE_NUMERIC = 'numeric';
+export const DATA_TYPE_DATE = 'date';
+export const DATA_TYPE_OTHERS = 'others';
+
+export default function useSorting(headers, rows, useLocalSorting) {
+  const sortKey = ref(null);
+  const sortOrder = ref(null);
+
+  const sortedRows = computed(() => {
+    if (!useLocalSorting.value || sortKey.value === null) return rows.value;
+
+    return [...rows.value].sort((a, b) => {
+      const aValue = a[sortKey.value];
+      const bValue = b[sortKey.value];
+
+      if (sortOrder.value === SORT_ORDER_ASC) {
+        return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
+      } else {
+        return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
+      }
+    });
+  });
+
+  const handleSort = index => {
+    if (headers.value[index].dataType === DATA_TYPE_OTHERS) return;
+
+    if (sortKey.value === index) {
+      sortOrder.value = sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC;
+    } else {
+      sortKey.value = index;
+      sortOrder.value = SORT_ORDER_ASC;
+    }
+  };
+
+  const getAriaSort = index => {
+    if (sortKey.value === index) {
+      return sortOrder.value === SORT_ORDER_ASC ? 'ascending' : 'descending';
+    } else {
+      return 'none';
+    }
+  };
+
+  return {
+    sortKey,
+    sortOrder,
+    sortedRows,
+    handleSort,
+    getAriaSort,
+  };
+}
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index d9115a87b..cc021fc54 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -26,7 +26,7 @@ import KRadioButton from './KRadioButton';
 import KRouterLink from './buttons-and-links/KRouterLink';
 import KSelect from './KSelect';
 import KSwitch from './KSwitch';
-import KTable from './KTable/KTable';
+import KTable from './KTable';
 import KTabs from './tabs/KTabs';
 import KTabsList from './tabs/KTabsList';
 import KTabsPanel from './tabs/KTabsPanel';
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 6e8b2ad4c..df85c5259 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import KTable from '../../lib/KTable/KTable.vue';
+import KTable from '../../lib/KTable';
 
 describe('KTable.vue', () => {
   it('should mount the component', () => {