refactor: added slots for table header and body

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -22,13 +22,10 @@ declare module '@vue/runtime-core' {
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     TeamsAdd: typeof import('./components/teams/Add.vue')['default']

packages/hoppscotch-sh-admin/src/pages/users/index.vue

@@ -31,7 +31,7 @@
 
         <div v-else-if="error">{{ t('users.load_list_error') }}</div>
 
-        <div v-else-if="usersList.length >= 1" class="m-5">
+        <div v-else-if="usersList.length > 0" class="m-5">
           <HoppSmartTable
             cell-styles="px-6 py-1"
             :list="newUsersList"

packages/hoppscotch-ui/src/components/smart/Table.vue

@@ -2,7 +2,9 @@
   <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
     <table class="w-full">
       <thead class="bg-primaryLight">
+        <slot v-if="!headings" name="head" />
         <tr
+          v-else
           class="text-secondary border-b border-dividerDark text-sm text-left"
         >
           <th v-for="th in headings" scope="col" class="px-6 py-3">
@@ -12,7 +14,9 @@
       </thead>
 
       <tbody class="divide-y divide-divider">
+        <slot v-if="!list" name="body" />
         <tr
+          v-else
           v-for="(rowData, rowIndex) in list"
           :key="rowIndex"
           class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"