refactor: remove checkbox prop

Implicitly conveyed via the `selectedRows` prop
hoppscotch · Mar 1, 2024 · dba62f1 · dba62f1
1 parent 53c54f9
commit dba62f1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 13 deletions.
diff --git a/src/components/smart/Table.vue b/src/components/smart/Table.vue
@@ -31,7 +31,7 @@
           <tr
             class="border-b border-dividerDark bg-primaryLight text-left text-sm text-secondary"
           >
-            <th v-if="checkbox" class="w-24">
+            <th v-if="selectedRows" class="w-24">
               <input
                 ref="selectAllCheckbox"
                 type="checkbox"
@@ -81,7 +81,7 @@
               :class="{ 'divide-x divide-divider': showYBorder }"
               @click="onRowClicked(rowData)"
             >
-              <td v-if="checkbox">
+              <td v-if="selectedRows">
                 <input
                   type="checkbox"
                   :checked="isRowSelected(rowData)"
@@ -142,10 +142,6 @@ const props = withDefaults(
     list: Item[]
     /** The headings of the table */
     headings?: CellHeading[]
-    /** Whether to show the checkbox column
-     * This will be overriden if custom implementation for body slot is provided
-     */
-    checkbox?: boolean
 
     selectedRows?: Item[]
     /** Whether to enable sorting */
@@ -165,7 +161,6 @@ const props = withDefaults(
   }>(),
   {
     showYBorder: false,
-    checkbox: false,
     sort: undefined,
     selectedRows: undefined,
     loading: false,
@@ -208,7 +203,7 @@ const workingList = useVModel(props, "list", emit)
 const selectedRows = useVModel(props, "selectedRows", emit)
 
 watch(workingList.value, (updatedList) => {
-  if (props.checkbox) {
+  if (props.selectedRows) {
     updatedList = updatedList.map((item) => ({
       ...item,
       selected: false,
@@ -288,6 +283,6 @@ watch(
 )
 
 const columnSpan = computed(
-  () => (props.headings?.length ?? 0) + (props.checkbox ? 1 : 0),
+  () => (props.headings?.length ?? 0) + (props.selectedRows ? 1 : 0),
 )
 </script>
diff --git a/src/stories/Table.story.vue b/src/stories/Table.story.vue
@@ -5,7 +5,6 @@
         :headings="headings"
         :loading="loading"
         :list="finalList"
-        :checkbox="true"
         :selected-rows="selectedRows"
         :pagination="{ totalPages: 2 }"
         @page-number="handlePageChange"
@@ -59,7 +58,6 @@
         :headings="headings"
         :loading="loading"
         :list="extensionList"
-        :checkbox="true"
         :selected-rows="selectedRows"
         :sort="{ key: 'name', direction: sortDirection }"
         @page-number="handlePageChange"
@@ -90,10 +88,11 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, Ref } from "vue"
+
 import { CellHeading, Direction } from "~/components/smart/Table.vue"
 import IconArrowUpDown from "~icons/lucide/arrow-up-down"
 import { HoppButtonPrimary, HoppSmartInput } from ".."
-import { HoppSmartTable, HoppSmartSpinner } from "../components/smart"
+import { HoppSmartSpinner, HoppSmartTable } from "../components/smart"
 
 type List = {
   id: string
@@ -148,10 +147,10 @@ const secondaryList: List[] = [
 onMounted(async () => {
   loading.value = true
 
+  // Simulate network call
   await new Promise((resolve) => setTimeout(resolve, 1000))
 
   finalList.value = primaryList
-
   loading.value = false
 })