TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-28 04:01:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

add dark mode in base table

Browse Source
This commit is contained in:
yashkanakiya
2023-03-20 18:49:43 +05:30
parent 15f3f566e3
commit ddd4ed77dc
1 changed files with 27 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
resources/scripts/components/base/base-table/BaseTable.vue
View File

@ -3,15 +3,10 @@
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 pb-4 lg:pb-0">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div
class="
relative
overflow-hidden
bg-white
border-b border-gray-200
shadow
sm:rounded-lg
"
class="relative overflow-hidden bg-white border-b border-gray-200 shadow sm:rounded-lg dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70"
>
<BaseDarkHighlight v-if="darkHighlight" class="z-[-1]" />
<slot name="header" />
<table :class="tableClass">
<thead :class="theadClass">
@ -51,7 +46,11 @@
<tr
v-for="placeRow in placeholderCount"
:key="placeRow"
:class="placeRow % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
:class="
placeRow % 2 === 0
? 'bg-white dark:bg-gray-800'
: 'bg-gray-50 dark:bg-gray-800'
"
>
<td
v-for="column in columns"
@ -75,7 +74,11 @@
<tr
v-for="(row, index) in sortedRows"
:key="index"
:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
:class="
index % 2 === 0
? 'bg-white dark:bg-transparent'
: 'bg-gray-50 dark:bg-gray-700/20 dark:border-y dark:border-gray-600'
"
>
<td
v-for="column in columns"
@ -93,18 +96,7 @@
<div
v-if="loadingType === 'spinner' && (loading || isLoading)"
class="
absolute
top-0
left-0
z-10
flex
items-center
justify-center
w-full
h-full
bg-white bg-opacity-60
"
class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full bg-white bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60"
>
<SpinnerIcon class="w-10 h-10 text-primary-500" />
</div>
@ -113,15 +105,7 @@
v-else-if="
!loading && !isLoading && sortedRows && sortedRows.length === 0
"
class="
text-center text-gray-500
pb-2
flex
h-[160px]
justify-center
items-center
flex-col
"
class="text-center text-gray-500 pb-2 flex h-[160px] justify-center items-center flex-col"
>
<BaseIcon
name="ExclamationCircleIcon"
@ -163,9 +147,12 @@ const props = defineProps({
sortOrder: { type: String, default: '' },
tableClass: {
type: String,
default: 'min-w-full divide-y divide-gray-200',
default: 'min-w-full divide-y divide-gray-200 dark:divide-gray-600',
},
theadClass: {
type: String,
default: 'bg-gray-50 dark:bg-gray-800 dark:text-white',
},
theadClass: { type: String, default: 'bg-gray-50' },
tbodyClass: { type: String, default: '' },
noResultsMessage: {
type: String,
@ -186,6 +173,10 @@ const props = defineProps({
type: Number,
default: 3,
},
darkHighlight: {
type: Boolean,
default: false,
},
})
let rows = reactive([])
@ -236,7 +227,7 @@ function getColumn(columnName) {
function getThClass(column) {
let classes =
'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'
'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white'
if (column.defaultThClass) {
classes = column.defaultThClass
@ -256,7 +247,8 @@ function getThClass(column) {
}
function getTdClass(column) {
let classes = 'px-6 py-4 text-sm text-gray-500 whitespace-nowrap'
let classes =
'px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-300'
if (column.defaultTdClass) {
classes = column.defaultTdClass