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"

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

@@ -1,45 +1,44 @@
<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" :class="yBorder ? 'divide-x divide-divider' : ''"
:class="yBorder ? 'divide-x divide-divider' : ''"
>
<td
v-for="cellHeading in headings"
:key="cellHeading.key"
@click="!cellHeading.preventClick && onRowClicked(rowData)"
class="max-w-40"
:class="cellStyles"
> >
<!-- Dynamic column slot --> <td
<slot :name="cellHeading.key" :item="rowData"> v-for="cellHeading in headings"
<!-- Generic implementation of the column --> :key="cellHeading.key"
<div class="flex flex-col truncate"> @click="!cellHeading.preventClick && onRowClicked(rowData)"
<span class="truncate"> class="max-w-40 px-6 py-1"
{{ rowData[cellHeading.key] ?? "-" }} >
</span> <!-- Dynamic column slot -->
</div> <slot :name="cellHeading.key" :item="rowData">
</slot> <!-- Generic implementation of the column -->
</td> <div class="flex flex-col truncate">
</tr> <span class="truncate">
{{ rowData[cellHeading.key] ?? "-" }}
</span>
</div>
</slot>
</td>
</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<{