Feature/custom dropdown classes

.gitignore

@@ -74,6 +74,9 @@ jspm_packages/
 .vuepress/dist
 docs/.vitepress/cache
 
+# VSCode custom configs
+.vscode
+
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 

src/components/FwbButton/FwbButton.vue

@@ -84,7 +84,7 @@ import { useButtonSpinner } from './composables/useButtonSpinner'
 import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
 
 interface IButtonProps {
-  class?: string
+  class?: string | object
   color?: ButtonVariant
   gradient?: ButtonGradient | null
   size?: ButtonSize

src/components/FwbButton/composables/useButtonClasses.ts

@@ -144,8 +144,8 @@ const buttonShadowClasses: Record<ButtonMonochromeGradient, string> = {
   teal: 'shadow-lg shadow-teal-500/50 dark:shadow-lg dark:shadow-teal-800/80',
 }
 
-export type UseButtonClassesProps = {
-  class: Ref<string>
+interface UseButtonClassesProps {
+  class: Ref<string|object>
   pill: Ref<boolean>
   disabled: Ref<boolean>
   loading: Ref<boolean>

src/components/FwbDropdown/FwbDropdown.vue

@@ -1,19 +1,21 @@
 <template>
   <div
-    ref="wrapper"
-    class="fwb-dropdown inline-flex relative"
+    ref="dropdownWrapper"
+    :class="wrapperClasses"
   >
-    <div class="inline-flex items-center">
+    <div :class="triggerWrapperClasses">
       <fwb-slot-listener @click="onToggle">
         <slot name="trigger">
           <fwb-button
-            :disabled="disabled"
+            :class="{'flex-row-reverse': placement === 'left', 'pl-2': placement === 'left', triggerClass}"
             :color="color"
+            :disabled="disabled"
           >
             {{ text }}
             <template #suffix>
               <svg
-                class="w-4 h-4 ml-2"
+                :class="triggerSuffixClass"
+                class="w-4 h-4"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -33,9 +35,9 @@
     </div>
     <transition :name="transitionName">
       <div
-        v-if="visible"
-        ref="content"
-        :class="[contentClasses]"
+        v-if="isContentVisible"
+        ref="contentWrapper"
+        :class="contentWrapperClasses"
         :style="contentStyles"
       >
         <fwb-slot-listener @click="onHide">
@@ -47,54 +49,66 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, toRef, watch } from 'vue'
+
+import { computed, ref, watch } from 'vue'
 import { onClickOutside } from '@vueuse/core'
-import type { DropdownPlacement } from './types'
+import { useDropdownClasses } from './composables/useDropdownClasses'
 import FwbButton from '@/components/FwbButton/FwbButton.vue'
 import FwbSlotListener from '@/components/utils/FwbSlotListener/FwbSlotListener.vue'
-import { useDropdownClasses } from './composables/useDropdownClasses'
 import type { ButtonVariant } from '@/components/FwbButton/types'
+import type { DropdownPlacement } from './types'
 
-const visible = ref(false)
-const onHide = () => {
-  if (props.closeInside) visible.value = false
-}
-const onToggle = () => {
-  if (props.disabled) return
-  visible.value = !visible.value
+export interface DropdownProps {
+  alignToEnd?: boolean
+  class?: string
+  closeInside?: boolean
+  color?: ButtonVariant
+  contentWrapperClass?: string
+  disabled?: boolean
+  placement?: DropdownPlacement
+  text?: string
+  transition?: string
+  triggerClass?: string
+  triggerWrapperClass?: string
 }
 
 const props = withDefaults(
-  defineProps<{
-    placement?: DropdownPlacement
-    text?: string
-    color?: ButtonVariant
-    transition?: string
-    closeInside?: boolean
-    alignToEnd?: boolean
-    disabled?: boolean
-  }>(),
+  defineProps<DropdownProps>(),
   {
-    placement: 'bottom',
-    text: '',
+    alignToEnd: false,
+    class: '',
+    closeInside: false,
     color: 'default',
+    contentWrapperClass: '',
+    disabled: false,
+    placement: 'bottom',
+    text: 'Dropdown',
     transition: '',
-    closeInside: false,
-    alignToEnd: false,
+    triggerClass: '',
+    triggerWrapperClass: '',
   },
 )
 
+const dropdownWrapper = ref<HTMLDivElement>()
+const contentWrapper = ref<HTMLDivElement>()
+const isContentVisible = ref(false)
+
+const onToggle = () => (isContentVisible.value = !isContentVisible.value)
+const onHide = () => props.closeInside && (isContentVisible.value = false)
+
+onClickOutside(dropdownWrapper, () =>
+  isContentVisible.value && (isContentVisible.value = false),
+)
+
 const emit = defineEmits<{
   show: []
   hide: []
 }>()
 
-watch(visible, (isVisible: boolean) => {
-  if (isVisible) {
-    emit('show')
-  } else {
-    emit('hide')
-  }
+watch(isContentVisible, () => {
+  isContentVisible.value
+    ? emit('show')
+    : emit('hide')
 })
 
 const placementTransitionMap: Record<DropdownPlacement, string> = {
@@ -104,89 +118,86 @@ const placementTransitionMap: Record<DropdownPlacement, string> = {
   top: 'to-top',
 }
 
-const transitionName = computed(() => {
-  if (props.transition === null) return placementTransitionMap[props.placement]
-  return props.transition
-})
-
-const content = ref<HTMLDivElement>()
-const wrapper = ref<HTMLDivElement>()
+const transitionName = computed(() =>
+  (!props.transition)
+    ? placementTransitionMap[props.placement]
+    : props.transition,
+)
 
-const { contentClasses, contentStyles } = useDropdownClasses({
-  placement: toRef(props, 'placement'),
-  alignToEnd: toRef(props, 'alignToEnd'),
-  visible,
-  contentRef: content,
-})
+const {
+  contentStyles,
+  contentWrapperClasses,
+  triggerSuffixClass,
+  triggerWrapperClasses,
+  wrapperClasses,
+} = useDropdownClasses({ contentWrapper, isContentVisible, props })
 
-onClickOutside(wrapper, () => {
-  if (!visible.value) return
-  visible.value = false
-})
 </script>
 
-<style scoped>
-/* transitions */
-.to-bottom-enter-active,
-.to-bottom-leave-active,
-.to-left-enter-active,
-.to-left-leave-active,
-.to-right-enter-active,
-.to-right-leave-active,
-.to-top-enter-active,
-.to-top-leave-active {
-  transition: all 250ms;
-}
+<style>
+.fwb-dropdown {
+  /* transitions */
+  .to-bottom-enter-active,
+  .to-bottom-leave-active,
+  .to-left-enter-active,
+  .to-left-leave-active,
+  .to-right-enter-active,
+  .to-right-leave-active,
+  .to-top-enter-active,
+  .to-top-leave-active {
+    transition: all 250ms;
+  }
 
-/* to top */
-.to-top-enter-active,
-.to-top-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
-}
+  /* to top */
+  .to-top-enter-active,
+  .to-top-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
 
-.to-top-leave,
-.to-top-enter-to {
-  opacity: 1;
-  transform: translateY(0);
-}
+  .to-top-leave,
+  .to-top-enter-to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 
-/* to right */
-.to-right-enter-active,
-.to-right-leave-to {
-  opacity: 0;
-  transform: translateX(-10px);
-}
+  /* to right */
+  .to-right-enter-active,
+  .to-right-leave-to {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
 
-.to-right-leave,
-.to-right-enter-to {
-  opacity: 1;
-  transform: translateX(0);
-}
+  .to-right-leave,
+  .to-right-enter-to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 
-/* to bottom */
-.to-bottom-enter-active,
-.to-bottom-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
+  /* to bottom */
+  .to-bottom-enter-active,
+  .to-bottom-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
 
-.to-bottom-leave,
-.to-bottom-enter-to {
-  opacity: 1;
-  transform: translateY(0);
-}
+  .to-bottom-leave,
+  .to-bottom-enter-to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 
-/* to left */
-.to-left-enter-active,
-.to-left-leave-to {
-  opacity: 0;
-  transform: translateX(10px);
-}
+  /* to left */
+  .to-left-enter-active,
+  .to-left-leave-to {
+    opacity: 0;
+    transform: translateX(10px);
+  }
 
-.to-left-leave,
-.to-left-enter-to {
-  opacity: 1;
-  transform: translateX(0);
+  .to-left-leave,
+  .to-left-enter-to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 </style>