Compare commits

..

2 Commits

Author SHA1 Message Date
bd8dd3f7c4 fix tab-list border in dark-mode 2023-03-28 12:22:36 +05:30
d221431bd7 add dark mode in base tabGroup and tab 2023-03-23 16:28:46 +05:30
5 changed files with 20 additions and 24 deletions

View File

@ -130,6 +130,7 @@
mt-5 mt-5
list-none list-none
border-b-2 border-gray-200 border-solid border-b-2 border-gray-200 border-solid
dark:border-gray-600
" "
> >
<!-- Tabs --> <!-- Tabs -->

View File

@ -127,6 +127,7 @@
mt-5 mt-5
list-none list-none
border-b-2 border-gray-200 border-solid border-b-2 border-gray-200 border-solid
dark:border-gray-600
" "
> >
<!-- Tabs --> <!-- Tabs -->

View File

@ -121,6 +121,7 @@
mt-5 mt-5
list-none list-none
border-b-2 border-gray-200 border-solid border-b-2 border-gray-200 border-solid
dark:border-gray-600
" "
> >
<!-- Tabs --> <!-- Tabs -->

View File

@ -7,7 +7,7 @@
> >
<TabList <TabList
:class="[ :class="[
'flex border-b border-grey-light', 'flex border-b border-grey-light dark:border-gray-600',
'relative overflow-x-auto overflow-y-hidden', 'relative overflow-x-auto overflow-y-hidden',
'lg:pb-0 lg:ml-0', 'lg:pb-0 lg:ml-0',
]" ]"
@ -22,8 +22,8 @@
:class="[ :class="[
'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-none whitespace-nowrap', 'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-none whitespace-nowrap',
selected selected
? ' border-primary-400 text-black font-medium' ? 'border-primary-400 text-black font-medium dark:text-white'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300', : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:border-gray-500',
]" ]"
> >
{{ tab.title }} {{ tab.title }}

View File

@ -10,14 +10,13 @@
bg-white bg-white
border-t border-gray-200 border-t border-gray-200
sm:px-6 sm:px-6
dark:bg-transparent dark:border-white/10
" "
> >
<div class="flex justify-between flex-1 sm:hidden"> <div class="flex justify-between flex-1 sm:hidden">
<a <a
href="#" href="#"
:class="{ :class="{
'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500': 'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
pagination.currentPage === 1, pagination.currentPage === 1,
}" }"
class=" class="
@ -33,7 +32,6 @@
border border-gray-300 border border-gray-300
rounded-md rounded-md
hover:bg-gray-50 hover:bg-gray-50
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
" "
@click="pageClicked(pagination.currentPage - 1)" @click="pageClicked(pagination.currentPage - 1)"
> >
@ -42,7 +40,7 @@
<a <a
href="#" href="#"
:class="{ :class="{
'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500': 'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
pagination.currentPage === pagination.totalPages, pagination.currentPage === pagination.totalPages,
}" }"
class=" class="
@ -59,7 +57,6 @@
border border-gray-300 border border-gray-300
rounded-md rounded-md
hover:bg-gray-50 hover:bg-gray-50
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
" "
@click="pageClicked(pagination.currentPage + 1)" @click="pageClicked(pagination.currentPage + 1)"
> >
@ -68,12 +65,12 @@
</div> </div>
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div> <div>
<p class="text-sm text-gray-700 dark:text-gray-400"> <p class="text-sm text-gray-700">
Showing Showing
{{ ' ' }} {{ ' ' }}
<span <span
v-if="pagination.limit && pagination.currentPage" v-if="pagination.limit && pagination.currentPage"
class="font-medium dark:text-gray-200" class="font-medium"
> >
{{ {{
pagination.currentPage * pagination.limit - (pagination.limit - 1) pagination.currentPage * pagination.limit - (pagination.limit - 1)
@ -84,7 +81,7 @@
{{ ' ' }} {{ ' ' }}
<span <span
v-if="pagination.limit && pagination.currentPage" v-if="pagination.limit && pagination.currentPage"
class="font-medium dark:text-gray-200" class="font-medium"
> >
<span <span
v-if=" v-if="
@ -101,7 +98,7 @@
{{ ' ' }} {{ ' ' }}
of of
{{ ' ' }} {{ ' ' }}
<span v-if="pagination.totalCount" class="font-medium dark:text-gray-200"> <span v-if="pagination.totalCount" class="font-medium">
{{ pagination.totalCount }} {{ pagination.totalCount }}
</span> </span>
{{ ' ' }} {{ ' ' }}
@ -116,7 +113,7 @@
<a <a
href="#" href="#"
:class="{ :class="{
'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500': 'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
pagination.currentPage === 1, pagination.currentPage === 1,
}" }"
class=" class="
@ -132,7 +129,6 @@
border border-gray-300 border border-gray-300
rounded-l-md rounded-l-md
hover:bg-gray-50 hover:bg-gray-50
dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
" "
@click="pageClicked(pagination.currentPage - 1)" @click="pageClicked(pagination.currentPage - 1)"
> >
@ -144,9 +140,9 @@
href="#" href="#"
aria-current="page" aria-current="page"
:class="{ :class="{
'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white': 'z-10 bg-primary-50 border-primary-500 text-primary-600':
isActive(1), isActive(1),
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300': 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
!isActive(1), !isActive(1),
}" }"
class=" class="
@ -177,7 +173,6 @@
text-gray-700 text-gray-700
bg-white bg-white
border border-gray-300 border border-gray-300
dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
" "
> >
... ...
@ -187,9 +182,9 @@
:key="page" :key="page"
href="#" href="#"
:class="{ :class="{
'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white': 'z-10 bg-primary-50 border-primary-500 text-primary-600':
isActive(page), isActive(page),
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300': 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
!isActive(page), !isActive(page),
disabled: page === '...', disabled: page === '...',
}" }"
@ -225,7 +220,6 @@
text-gray-700 text-gray-700
bg-white bg-white
border border-gray-300 border border-gray-300
dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
" "
> >
... ...
@ -235,9 +229,9 @@
href="#" href="#"
aria-current="page" aria-current="page"
:class="{ :class="{
'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white': 'z-10 bg-primary-50 border-primary-500 text-primary-600':
isActive(pagination.totalPages), isActive(pagination.totalPages),
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300': 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
!isActive(pagination.totalPages), !isActive(pagination.totalPages),
}" }"
class=" class="
@ -269,10 +263,9 @@
border border-gray-300 border border-gray-300
rounded-r-md rounded-r-md
hover:bg-gray-50 hover:bg-gray-50
dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
" "
:class="{ :class="{
'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500': 'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
pagination.currentPage === pagination.totalPages, pagination.currentPage === pagination.totalPages,
}" }"
@click="pageClicked(pagination.currentPage + 1)" @click="pageClicked(pagination.currentPage + 1)"