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

feat: Migrate to tailwind-merge(Accordion) (#191)

Browse Source
This commit is contained in:
Ilya Artamonov
2023-10-11 13:35:28 +03:00
committed by GitHub
parent 872e736d84
commit be7e63a495
2 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { computed, type Ref } from 'vue'
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import classNames from 'classnames'
import { twMerge } from 'tailwind-merge'
const baseContentClasses = 'p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900'
export function useAccordionContentClasses(contentRef: Ref) {
@@ -12,12 +12,13 @@ export function useAccordionContentClasses(contentRef: Ref) {
const panelsCount = computed(() => Object.keys(accordionsStates[accordionId.value].panels[panelId.value]).length)
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 twMerge(
baseContentClasses,
!panelState.value.isVisible && 'hidden',
(panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush) && 'border-b-0',
panelState.value.order === panelsCount.value - 1 && 'border-t-0',
accordionState.value.flush && 'border-x-0',
)
})
return {
contentClasses,

19
src/components/Accordion/composables/useAccordionHeaderClasses.ts
View File

@@ -1,6 +1,6 @@
import { computed, type Ref } from 'vue'
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import classNames from 'classnames'
import { twMerge } from 'tailwind-merge'
const baseHeaderClasses =
'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'
@@ -16,16 +16,17 @@ export function useAccordionHeaderClasses(headerRef: Ref) {
const isBottomBorderVisibleForFlush = computed(() => isPanelLast.value || (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
const headerClasses = computed(() => {
return classNames(baseHeaderClasses, {
'bg-gray-100 dark:bg-gray-800': panelState.value.isVisible,
'rounded-t-xl': panelState.value.order === 0 && !accordionState.value.flush,
'border-t-0': panelState.value.order === 0 && accordionState.value.flush,
'border-b-0': isBottomBorderVisibleForFlush.value,
'border-x-0': accordionState.value.flush,
})
return twMerge(
baseHeaderClasses,
panelState.value.isVisible && 'bg-gray-100 dark:bg-gray-800',
panelState.value.order === 0 && !accordionState.value.flush && 'rounded-t-xl',
panelState.value.order === 0 && accordionState.value.flush && 'border-t-0',
isBottomBorderVisibleForFlush.value && 'border-b-0',
accordionState.value.flush && 'border-x-0',
)
})
const arrowClasses = computed(() => {
return classNames(baseArrowClasses, { 'rotate-180': panelState.value.isVisible })
return twMerge(baseArrowClasses, panelState.value.isVisible && 'rotate-180')
})
return {
headerClasses,