Feature/twmerge as composable (#250)

* twMerge extracted to global composable
+ support for user classes in FwbButton

* useMergeClasses added to Navbar

* css class as prop

* NavBar component updated to use class prop

src/components/FwbButton/FwbButton.vue

@@ -77,12 +77,14 @@
 
 <script lang="ts" setup>
 import { computed, resolveComponent, toRefs } from 'vue'
+import { useMergeClasses } from '@/composables/useMergeClasses'
 import FwbSpinner from '../FwbSpinner/FwbSpinner.vue'
 import { useButtonClasses } from './composables/useButtonClasses'
 import { useButtonSpinner } from './composables/useButtonSpinner'
 import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
 
 interface IButtonProps {
+  class?: string
   color?: ButtonVariant
   gradient?: ButtonGradient | null
   size?: ButtonSize
@@ -97,6 +99,7 @@ interface IButtonProps {
   tag?: string
 }
 const props = withDefaults(defineProps<IButtonProps>(), {
+  class: '',
   color: 'default',
   gradient: null,
   size: 'md',
@@ -111,12 +114,15 @@ const props = withDefaults(defineProps<IButtonProps>(), {
   tag: 'a',
 })
 
+const buttonClasses = useButtonClasses(toRefs(props))
+const wrapperClasses = computed(() => useMergeClasses(buttonClasses.wrapperClasses))
+const spanClasses = computed(() => useMergeClasses(buttonClasses.spanClasses))
+
 const isOutlineGradient = computed(() => props.outline && props.gradient)
 
 const loadingPrefix = computed(() => props.loading && props.loadingPosition === 'prefix')
 const loadingSuffix = computed(() => props.loading && props.loadingPosition === 'suffix')
 
-const { wrapperClasses, spanClasses } = useButtonClasses(toRefs(props))
 const { color: spinnerColor, size: spinnerSize } = useButtonSpinner(toRefs(props))
 
 const linkComponent = props.tag !== 'a' ? resolveComponent(props.tag) : 'a'

src/components/FwbButton/composables/useButtonClasses.ts

@@ -1,5 +1,4 @@
 import { computed, type Ref, useSlots } from 'vue'
-import { twMerge } from 'tailwind-merge'
 import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
 
 export type ButtonClassMap<T extends string> = { hover: Record<T, string>; default: Record<T, string> }
@@ -146,6 +145,7 @@ const buttonShadowClasses: Record<ButtonMonochromeGradient, string> = {
 }
 
 export type UseButtonClassesProps = {
+  class: Ref<string>
   pill: Ref<boolean>
   disabled: Ref<boolean>
   loading: Ref<boolean>
@@ -160,7 +160,7 @@ export type UseButtonClassesProps = {
 const simpleGradients = ['blue', 'green', 'cyan', 'teal', 'lime', 'red', 'pink', 'purple']
 const alternativeColors = ['alternative', 'light']
 
-export function useButtonClasses (props: UseButtonClassesProps): { wrapperClasses: Ref<string>; spanClasses: Ref<string> } {
+export function useButtonClasses (props: UseButtonClassesProps): { wrapperClasses: string; spanClasses: string } {
   const slots = useSlots()
 
   const sizeClasses = computed(() => {
@@ -223,7 +223,7 @@ export function useButtonClasses (props: UseButtonClassesProps): { wrapperClasse
       }
     }
 
-    return twMerge(
+    return [
       backgroundClass,
       hoverClass,
       shadowClass,
@@ -231,23 +231,24 @@ export function useButtonClasses (props: UseButtonClassesProps): { wrapperClasse
       props.disabled.value && 'cursor-not-allowed opacity-50',
       isGradient && isOutline ? 'p-0.5' : sizeClasses.value,
       (slots.prefix || slots.suffix || props.loading.value) && 'inline-flex items-center',
-    )
+      props.class.value,
+    ].filter((str) => (str)).join(' ')
   })
 
   const spanClasses = computed(() => {
     if (!!props.gradient.value && props.outline.value) {
       // ONLY FOR GRADIENT OUTLINE BUTTON
-      return twMerge(
+      return [
         'relative bg-white dark:bg-gray-900 rounded-md inline-flex items-center',
         sizeClasses.value,
         !props.disabled.value ? 'group-hover:bg-opacity-0 transition-all ease-in duration-75' : '',
-      )
+      ].filter((str) => (str)).join(' ')
     }
     return ''
   })
 
   return {
-    wrapperClasses: bindClasses,
+    wrapperClasses: bindClasses.value,
-    spanClasses,
+    spanClasses: spanClasses.value,
   }
 }

src/components/FwbNavbar/FwbNavbar.vue

@@ -41,9 +41,13 @@
 <script lang="ts" setup>
 import { computed, ref, useSlots } from 'vue'
 import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
-import classNames from 'classnames'
+import { useMergeClasses } from '@/composables/useMergeClasses'
 
 const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
   sticky: {
     type: Boolean,
     default: false,
@@ -57,6 +61,7 @@ const props = defineProps({
     default: false,
   },
 })
+
 const slots = useSlots()
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
@@ -69,11 +74,14 @@ const navbarRoundedClasses = 'rounded'
 const navbarSolidClasses = 'p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
 const navbarWhiteClasses = 'bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900'
 
-const navbarClasses = computed(() => classNames(
+const navbarClasses = computed(() => useMergeClasses(
+  [
     navbarBaseClasses,
     props.sticky ? navbarFloatClasses : '',
     props.rounded ? navbarRoundedClasses : '',
     props.solid ? navbarSolidClasses : navbarWhiteClasses,
+    props.class,
+  ].join(' '),
 ))
 
 const isShowMenu = computed(() => (!isMobile)

src/composables/useMergeClasses.ts

@@ -0,0 +1,4 @@
+import { twMerge } from 'tailwind-merge'
+
+export const useMergeClasses = (componentClasses: string): string =>
+  twMerge(componentClasses)