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

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

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