adding table tr transition

This commit is contained in:
Geriano
2022-07-30 11:21:42 +07:00
parent d56197b4e7
commit 7519c5ef9f
3 changed files with 5 additions and 5 deletions

View File

@@ -22,7 +22,7 @@ const self = getCurrentInstance()
<Builder :url="route('api.v1.superuser.activity.login')"> <Builder :url="route('api.v1.superuser.activity.login')">
<template #thead="table"> <template #thead="table">
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900"> <tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
<Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th> <Th class="border p-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="users.name">name</Th> <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="users.name">name</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="users.username">username</Th> <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="users.username">username</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="login_activities.ip_address">ip address</Th> <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="true" name="login_activities.ip_address">ip address</Th>
@@ -34,7 +34,7 @@ const self = getCurrentInstance()
<template #tfoot="table"> <template #tfoot="table">
<tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900"> <tr class="bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-900">
<Th class="border px-3 py-2 text-center" :table="table" :sort="false">no</Th> <Th class="border p-2 text-center" :table="table" :sort="false">no</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">name</Th> <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">name</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">username</Th> <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">username</Th>
<Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">ip address</Th> <Th class="border px-3 py-2 text-center whitespace-nowrap" :table="table" :sort="false">ip address</Th>
@@ -50,7 +50,7 @@ const self = getCurrentInstance()
leaveActiveClass="transition-all duration-50" leaveActiveClass="transition-all duration-50"
enterFromClass="opacity-0 -scale-y-100" enterFromClass="opacity-0 -scale-y-100"
leaveToClass="opacity-0 -scale-y-100"> leaveToClass="opacity-0 -scale-y-100">
<tr v-for="(activity, i) in data" :key="i" class="dark:hover:bg-gray-600 dark:border-gray-800 transition-all"> <tr v-for="(activity, i) in data" :key="i" class="dark:hover:bg-gray-600 dark:border-gray-800 transition-all duration-300">
<td class="px-2 py-1 border border-inherit text-center">{{ i + 1 }}</td> <td class="px-2 py-1 border border-inherit text-center">{{ i + 1 }}</td>
<td class="px-2 py-1 border border-inherit uppercase">{{ activity.name }}</td> <td class="px-2 py-1 border border-inherit uppercase">{{ activity.name }}</td>
<td class="px-2 py-1 border border-inherit uppercase">{{ activity.username }}</td> <td class="px-2 py-1 border border-inherit uppercase">{{ activity.username }}</td>

View File

@@ -145,7 +145,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</template> </template>
<template v-else> <template v-else>
<tr v-for="(role, i) in (tableRefresh = refresh) ? data : data" :key="i"> <tr v-for="(role, i) in (tableRefresh = refresh) ? data : data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
<td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td> <td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
<td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ role.name }}</td> <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ role.name }}</td>
<td class="px-2 py-1 border dark:border-gray-800"> <td class="px-2 py-1 border dark:border-gray-800">

View File

@@ -187,7 +187,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</template> </template>
<template v-else> <template v-else>
<tr v-for="(user, i) in (tableRefresh = refresh) ? data : data" :key="i" class="dark:hover:bg-gray-600 transition-all"> <tr v-for="(user, i) in (tableRefresh = refresh) ? data : data" :key="i" class="dark:hover:bg-gray-600 transition-all duration-300">
<td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td> <td class="px-2 py-1 border dark:border-gray-800 text-center">{{ i + 1 }}</td>
<td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.name }}</td> <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.name }}</td>
<td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.username }}</td> <td class="px-2 py-1 border dark:border-gray-800 uppercase">{{ user.username }}</td>