feat: added dropdown component

package.json

@@ -65,6 +65,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "eslint-plugin-vue": "^9.3.0",
+    "floating-vue": "^2.0.0-beta.19",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
@@ -82,5 +83,8 @@
     "vue": "^3.2.37",
     "vue-eslint-parser": "^9.0.3",
     "vue-tsc": "^0.40.1"
+  },
+  "peerDependencies": {
+    "floating-vue": "^2.0.0-beta.19"
   }
 }

playground/App.vue

@@ -10,6 +10,8 @@ const example = ref('vue-simple-dropdown')
 <template>
   <div class="container mx-auto px-4">
     <div h1 class="text-3xl font-bold pt-4">Playground for {{ example }}</div>
-    <SimpleDropdown />
+    <div class="mt-4">
+      <SimpleDropdown class="inline" />
+    </div>
   </div>
 </template>

playground/index.css

@@ -4,4 +4,4 @@
 
 .debug {
   border: 1px solid red;
-}
+}

src/BaseDropdown.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+import { PopperWrapper } from 'floating-vue'
+
+export default {
+  ...PopperWrapper,
+  name: 'BaseDropdown',
+  vPopperTheme: 'simple-dropdown'
+}
+</script>
+
+<style>
+.v-popper--theme-simple-dropdown .v-popper__inner {
+  background: #fff;
+}
+
+.v-popper--theme-simple-dropdown .v-popper__arrow-inner {
+  visibility: visible;
+  border-color: #fff;
+}
+
+.v-popper--theme-simple-dropdown .v-popper__arrow-outer {
+  border-color: #ddd;
+}
+</style>

src/VueSimpleDropdown.vue

@@ -1,11 +1,57 @@
 <template>
-  <div>VueSimpleDropdown</div>
+  <BaseDropdown :distance="14" placement="bottom-start" :triggers="['click']" auto-hide popper-class="border rounded">
+    <!-- This will be the popover reference (for the events and position) -->
+    <button
+      class="inline-block px-6 py-2.5 bg-blue-600 text-white leading-tight rounded hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out"
+    >
+      Click me
+    </button>
+
+    <!-- This will be the content of the popover -->
+    <template #popper="{ hide }">
+      <div class="w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700">
+        <ul class="py-1 text-sm text-gray-700 dark:text-gray-200">
+          <li>
+            <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" @click="hide"
+              >Dashboard</a
+            >
+          </li>
+          <li>
+            <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
+          </li>
+          <li>
+            <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
+          </li>
+          <li>
+            <a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
+          </li>
+        </ul>
+      </div>
+    </template>
+  </BaseDropdown>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'Vue'
+<script setup lang="ts">
+import 'floating-vue/dist/style.css'
+
+import BaseDropdown from './BaseDropdown.vue'
+import { ref } from 'vue'
 
-export default defineComponent({
-  name: 'VueSimpleDropdown'
-})
+const msg = ref('hello')
 </script>
+
+<style>
+.v-popper--theme-simple .v-popper__inner {
+  background: #fff;
+}
+.v-popper--theme-simple .v-popper__arrow-inner {
+  visibility: visible;
+  border-color: #fff;
+}
+.v-popper--theme-simple .v-popper__arrow-outer {
+  border-color: #ddd;
+}
+.v-popper--theme-simple .v-popper__arrow-outer {
+  border-color: #ddd;
+}
+</style>