Compare commits

..

2 Commits

Author SHA1 Message Date
c9fa597634 fix indentation 2023-03-23 13:24:21 +05:30
e8060f56be add dark mode base switch & switcher 2023-03-23 13:18:55 +05:30
3 changed files with 24 additions and 27 deletions

View File

@ -7,7 +7,7 @@
<Switch
v-model="enabled"
:class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
:class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
class="
relative
inline-flex
@ -21,7 +21,11 @@
v-bind="$attrs"
>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
:class="
enabled
? 'translate-x-6 dark:bg-white'
: 'translate-x-1 dark:bg-gray-500'
"
class="
inline-block
w-4

View File

@ -5,12 +5,12 @@
<div class="flex flex-col">
<SwitchLabel
as="p"
class="p-0 mb-1 text-sm leading-snug text-black font-medium"
class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
passive
>
{{ title }}
</SwitchLabel>
<SwitchDescription class="text-sm text-gray-500">
<SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
{{ description }}
</SwitchDescription>
</div>
@ -18,7 +18,7 @@
:disabled="disabled"
:model-value="modelValue"
:class="[
modelValue ? 'bg-primary-500' : 'bg-gray-200',
modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
]"
@update:modelValue="onUpdate"
@ -26,7 +26,7 @@
<span
aria-hidden="true"
:class="[
modelValue ? 'translate-x-5' : 'translate-x-0',
modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
]"
/>

View File

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