jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fixed borders

Browse Source
This commit is contained in:
victor
2022-12-11 00:15:09 +04:00
parent 93e863f02c
commit 13be6cc7bc
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Accordion/AccordionContent.vue
View File

@@ -1,7 +1,11 @@
<template> <template>
<div <div
:class="{ hidden: !panelState.isVisible }" :class="{
class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900" hidden: !panelState.isVisible,
'border-b-0': panelState.order !== panelsCount - 1,
'border-t-0': panelState.order === panelsCount - 1,
}"
class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
> >
<slot /> <slot />
</div> </div>
@@ -14,7 +18,8 @@ import { computed, inject } from 'vue'
const accordionId: any = inject('accordionId') const accordionId: any = inject('accordionId')
const panelId: any = inject('panelId') const panelId: any = inject('panelId')
const { accordionsStates } = useAccordionState()
const { accordionsStates } = useAccordionState()
const panelState = computed(() => accordionsStates[accordionId].panels[panelId]) const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
</script> </script>

8
src/components/Accordion/AccordionHeader.vue
View File

@@ -2,7 +2,10 @@
<button <button
type="button" type="button"
@click="toggleItem" @click="toggleItem"
:class="{ 'rounded-t-xl border-b-0': panelState.order === 0 }" :class="{
'rounded-t-xl': panelState.order === 0,
'border-b-0': panelState.order !== panelsCount - 1,
}"
class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
> >
<span class="w-full"><slot /></span> <span class="w-full"><slot /></span>
@@ -21,7 +24,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState' import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import { computed, inject, provide } from 'vue' import { computed, inject } from 'vue'
const accordionId: any = inject('accordionId') const accordionId: any = inject('accordionId')
@@ -30,6 +33,7 @@ const panelId: any = inject('panelId')
const accordionState = computed(() => { const accordionState = computed(() => {
return accordionsStates[accordionId] return accordionsStates[accordionId]
}) })
const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
const commonToggleItem = () => { const commonToggleItem = () => {
const selectedPanel = accordionState.value.panels[panelId] const selectedPanel = accordionState.value.panels[panelId]