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

fix: fixed accordion

Browse Source
This commit is contained in:
victor
2022-12-13 18:20:44 +04:00
parent 11fe2dd903
commit 552c460efa
6 changed files with 103 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Accordion/composables/useAccordionContentClasses.ts
View File

@@ -1,29 +1,25 @@
import { computed, inject } from 'vue'
import { computed } from 'vue'
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import classNames from 'classnames'
const baseContentClasses = 'p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900'
export function useAccordionContentClasses() {
const accordionId: string = inject('accordionId') ?? ''
const panelId: string = inject('panelId') ?? ''
export function useAccordionContentClasses(contentRef: any) {
const accordionId = computed(() => contentRef.value.parentElement.parentElement.dataset.accordionId)
const panelId = computed(() => contentRef.value.parentElement.dataset.panelId)
const { accordionsStates } = useAccordionState()
const accordionState = computed(() => accordionsStates[accordionId.value])
const panelState = computed(() => accordionsStates[accordionId.value].panels[panelId.value])
const panelsCount = computed(() => Object.keys(accordionsStates[accordionId.value].panels[panelId.value]).length)
const accordionState = computed(() => accordionsStates[accordionId])
const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
const contentClasses = computed(() => classNames(baseContentClasses, {
hidden: !panelState.value.isVisible,
'border-b-0': panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush,
'border-t-0': panelState.value.order === panelsCount.value - 1,
'border-x-0': accordionState.value.flush,
}))
const contentClasses = computed(() => {
return classNames(baseContentClasses, {
hidden: !panelState.value.isVisible,
'border-b-0': panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush,
'border-t-0': panelState.value.order === panelsCount.value - 1,
'border-x-0': accordionState.value.flush,
})
})
return {
contentClasses,
}
}