From 32d9c4a5bc8dc1a0bd3b9e53785b41286442ae20 Mon Sep 17 00:00:00 2001
From: Sqrcz <naorniakowski@slashlab.pl>
Date: Tue, 5 Dec 2023 17:00:44 +0100
Subject: [PATCH] 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        |  8 +++++++-
 .../FwbButton/composables/useButtonClasses.ts | 17 ++++++++--------
 src/components/FwbNavbar/FwbNavbar.vue        | 20 +++++++++++++------
 src/composables/useMergeClasses.ts            |  4 ++++
 4 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 src/composables/useMergeClasses.ts

diff --git a/src/components/FwbButton/FwbButton.vue b/src/components/FwbButton/FwbButton.vue
index 6b8b13f..d15fbe8 100644
--- a/src/components/FwbButton/FwbButton.vue
+++ b/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'
diff --git a/src/components/FwbButton/composables/useButtonClasses.ts b/src/components/FwbButton/composables/useButtonClasses.ts
index 74abfa2..232aa28 100644
--- a/src/components/FwbButton/composables/useButtonClasses.ts
+++ b/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,
-    spanClasses,
+    wrapperClasses: bindClasses.value,
+    spanClasses: spanClasses.value,
   }
 }
diff --git a/src/components/FwbNavbar/FwbNavbar.vue b/src/components/FwbNavbar/FwbNavbar.vue
index e630b2f..19dbedb 100644
--- a/src/components/FwbNavbar/FwbNavbar.vue
+++ b/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(
-  navbarBaseClasses,
-  props.sticky ? navbarFloatClasses : '',
-  props.rounded ? navbarRoundedClasses : '',
-  props.solid ? navbarSolidClasses : navbarWhiteClasses,
+const navbarClasses = computed(() => useMergeClasses(
+  [
+    navbarBaseClasses,
+    props.sticky ? navbarFloatClasses : '',
+    props.rounded ? navbarRoundedClasses : '',
+    props.solid ? navbarSolidClasses : navbarWhiteClasses,
+    props.class,
+  ].join(' '),
 ))
 
 const isShowMenu = computed(() => (!isMobile)
diff --git a/src/composables/useMergeClasses.ts b/src/composables/useMergeClasses.ts
new file mode 100644
index 0000000..cbfd2b4
--- /dev/null
+++ b/src/composables/useMergeClasses.ts
@@ -0,0 +1,4 @@
+import { twMerge } from 'tailwind-merge'
+
+export const useMergeClasses = (componentClasses: string): string =>
+  twMerge(componentClasses)