jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bug floating border rounded th element

Browse Source
This commit is contained in:
Geriano
2022-07-18 18:47:17 +07:00
parent 02b2b8b72d
commit dae42a4657
2 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
resources/js/Components/DataTable/Th.vue
View File

@@ -29,33 +29,10 @@ const click = () => {
table.refresh()
}
const floating = () => {
if (table && table.config.sticky) {
const { th, float } = self.refs
if (th && float) {
// float.style.width = th.clientWidth + 'px'
// float.style.height = th.clientHeight + 'px'
const parent = th.parentElement
if (parent.firstElementChild == th) {
float.classList.add('rounded-tl-md')
}
if (parent.children[parent.children.length - 1] === th) {
float.classList.add('rounded-tr-md')
}
}
}
}
onMounted(floating)
</script>
<template>
<th ref="th" class="relative uppercase font-semibold" :class="`${table?.config?.sticky && 'sticky top-0 left-0 border-0'} ${sort && 'cursor-pointer'} ${$props.class}`" @click.prevent="sort && table && click()">
<th ref="th" class="relative uppercase font-semibold" :class="`${table?.config?.sticky ? 'sticky top-0 left-0 border-0' : 'border-1'} ${sort && 'cursor-pointer'} ${$props.class}`" @click.prevent="sort && table && click()">
<div class="flex items-center justify-center space-x-2">
<div>
<slot />
@@ -68,8 +45,5 @@ onMounted(floating)
</div>
</template>
</div>
<div ref="float" v-if="table?.config?.sticky" class="absolute top-0 left-0 w-full h-full" :class="`${sort && 'cursor-pointer'} ${$props.class} bg-transparent dark:bg-transparent`">
</div>
</th>
</template>