btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: new slots for table and body

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-08-10 16:59:46 +05:30
parent caf5d7ec0f
commit 9e0453d3bb
2 changed files with 34 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,6 @@
<div v-else-if="usersList.length > 0" class="m-5"> <div v-else-if="usersList.length > 0" class="m-5">
<HoppSmartTable <HoppSmartTable
cell-styles="px-6 py-1"
:list="newUsersList" :list="newUsersList"
:headings="headings" :headings="headings"
@on-row-clicked="goToUserDetails" @on-row-clicked="goToUserDetails"

17
packages/hoppscotch-ui/src/components/smart/Table.vue
View File

@@ -1,22 +1,21 @@
<template> <template>
<div class="overflow-auto rounded-md border border-dividerDark shadow-md"> <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
<table class="w-full"> <table class="w-full">
<thead class="bg-primaryLight"> <thead>
<slot v-if="!headings" name="head" /> <slot name="head">
<tr <tr
v-else class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
class="text-secondary border-b border-dividerDark text-sm text-left"
> >
<th v-for="th in headings" scope="col" class="px-6 py-3"> <th v-for="th in headings" scope="col" class="px-6 py-3">
{{ th.label ?? th.key }} {{ th.label ?? th.key }}
</th> </th>
</tr> </tr>
</slot>
</thead> </thead>
<tbody class="divide-y divide-divider"> <tbody class="divide-y divide-divider">
<slot v-if="!list" name="body" /> <slot name="body">
<tr <tr
v-else
v-for="(rowData, rowIndex) in list" v-for="(rowData, rowIndex) in list"
:key="rowIndex" :key="rowIndex"
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl" class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
@@ -26,8 +25,7 @@
v-for="cellHeading in headings" v-for="cellHeading in headings"
:key="cellHeading.key" :key="cellHeading.key"
@click="!cellHeading.preventClick && onRowClicked(rowData)" @click="!cellHeading.preventClick && onRowClicked(rowData)"
class="max-w-40" class="max-w-40 px-6 py-1"
:class="cellStyles"
> >
<!-- Dynamic column slot --> <!-- Dynamic column slot -->
<slot :name="cellHeading.key" :item="rowData"> <slot :name="cellHeading.key" :item="rowData">
@@ -40,6 +38,7 @@
</slot> </slot>
</td> </td>
</tr> </tr>
</slot>
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -59,8 +58,6 @@ defineProps<{
list: Item[] list: Item[]
/** The headings of the table */ /** The headings of the table */
headings: CellHeading[] headings: CellHeading[]
/** The styles to be applied to the table cells */
cellStyles?: string
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{