feat: add dropdown

src/components/Dropdown/Dropdown.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="inline-flex relative" ref="wrapper">
+    <slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
+      <Button @click="onToggle">
+        {{ text }}
+        <template #suffix>
+          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+        </template>
+      </Button>
+    </slot>
+    <div ref="content" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
+      <slot />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, toRef } from 'vue'
+import type { PropType } from 'vue'
+import type { DropdownPlacement } from './types'
+import { useDropdownClasses } from './composables/useDropdownClasses'
+import Button from '../Button/Button.vue'
+import { onClickOutside } from '@vueuse/core'
+
+const visible = ref(false)
+
+const onShow = () => visible.value = true
+const onHide = () => visible.value = false
+const onToggle = () => visible.value = !visible.value
+
+const props = defineProps({
+  placement: {
+    type: String as PropType<DropdownPlacement>,
+    default: 'bottom',
+  },
+  text: {
+    type: String ,
+    default: '',
+  },
+})
+
+const content = ref<HTMLDivElement>()
+const wrapper = ref<HTMLDivElement>()
+
+const { contentClasses, contentStyles } = useDropdownClasses({
+  placement: toRef(props, 'placement'),
+  visible,
+  contentRef: content,
+})
+
+onClickOutside(wrapper, () => {
+  if(!visible.value) return
+  visible.value = false
+})
+</script>

src/components/Dropdown/composables/useDropdownClasses.ts

@@ -0,0 +1,65 @@
+import { computed, nextTick, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import classNames from 'classnames'
+import type { DropdownPlacement } from '../types'
+
+const defaultDropdownClasses = 'absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700'
+
+const placementDropdownClasses: Record<DropdownPlacement, string> = {
+    bottom: '',
+    left: 'top-0',
+    right: 'top-0',
+    top: '',
+}
+
+export type UseDropdownClassesProps = {
+    placement: Ref<DropdownPlacement>
+    contentRef: Ref<HTMLDivElement | undefined>
+    visible: Ref<boolean>
+}
+
+const placementCalculators: Record<DropdownPlacement, (rect: DOMRect) => string> = {
+    bottom(rect: DOMRect): string {
+        return `bottom: -${rect.height}px;`
+    },
+    left(rect: DOMRect): string {
+        return `left: -${rect.width}px;`
+    },
+    right(rect: DOMRect): string {
+        return `right: -${rect.width}px;`
+    },
+    top(rect: DOMRect): string {
+        return `top: -${rect.height}px;`
+    },
+
+}
+
+export function useDropdownClasses(props: UseDropdownClassesProps): {
+    contentClasses: Ref<string>
+    contentStyles: Ref<string>
+} {
+
+    watch(props.visible, (value: boolean) => {
+        if(value) nextTick(() => calculatePlacementClasses())
+    })
+
+    const placementStyles = ref('')
+
+    const calculatePlacementClasses = () => {
+        const boundingRect = props.contentRef.value?.getBoundingClientRect()
+        if(!boundingRect) return placementStyles.value = ''
+        placementStyles.value = placementCalculators[props.placement.value](boundingRect)
+    }
+
+    const contentClasses = computed(() => {
+        return classNames(
+            defaultDropdownClasses,
+            placementDropdownClasses[props.placement.value],
+        )
+    })
+
+    return {
+        contentClasses,
+        contentStyles: placementStyles,
+    }
+}

src/components/Dropdown/types.d.ts

@@ -0,0 +1 @@
+export type DropdownPlacement = 'top' | 'bottom' | 'left' | 'right'