WIP: initial setup and more

src/components/Dropdown.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps({
+  autoClose: {
+    type: Boolean,
+    default: true,
+  },
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const isVisible = ref(false);
+const dropdown = ref(null);
+
+function toggle() {
+  isVisible.value = !isVisible.value;
+  if (isVisible.value && props.autoClose) {
+    document.addEventListener("click", handleClickOutside);
+  } else {
+    document.removeEventListener("click", handleClickOutside);
+  }
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (event.target instanceof HTMLElement) {
+    const target = event.target as HTMLElement;
+    const self = dropdown.value as unknown as HTMLElement;
+    if (self && (self.contains(target) || self === target)) {
+      return;
+    }
+  }
+  toggle();
+}
+</script>
+
+<template>
+  <div ref="dropdown">
+    <slot name="trigger" :toggle="toggle" :is-visible="isVisible" />
+    <div
+      :class="{
+        fixed: fixed,
+      }"
+    >
+      <slot :is-visible="isVisible" />
+    </div>
+  </div>
+</template>

src/components/index.ts

@@ -0,0 +1 @@
+export * as Accordion from './Accordion.vue';

src/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue'
+import * as components from './components'
+
+export type ObjectKey = keyof typeof components;
+
+export default {
+    install(app: App, options: any) {
+        Object.keys(components).forEach(component => {
+            app.component(component, components[component as ObjectKey])
+        })
+    }
+}