cleanup rules

src/components/Dropdown.vue

@@ -1,22 +1,37 @@
 <script setup lang="ts">
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
-import { vOnClickOutside } from '@vueuse/components';
-import { useEventListener } from '@vueuse/core';
-import { ref } from 'vue';
+import {ChevronDownIcon, ChevronUpIcon} from '@heroicons/vue/24/outline';
+import {vOnClickOutside} from '@vueuse/components';
+import {useEventListener} from '@vueuse/core';
+import {ref} from 'vue';
+
+interface Props {
+  inline?: boolean;
+  autoClose: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  inline: false,
+  autoClose: true
+})
 
 const isOpen = ref(false);
 
+const doAutoClose = () => {
+  if (props.autoClose) {
+    isOpen.value = false;
+  }
+}
+
 useEventListener('keyup', e => {
     if (e.key === 'Escape') {
-        isOpen.value = false;
+      doAutoClose();
     }
 });
 </script>
 
 <template>
-    <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="() => isOpen = false">
+    <div class="dropdown" :class="{'dropdown-open': isOpen, 'dropdown-close': !isOpen}" v-on-click-outside="doAutoClose">
         <button @click="isOpen = !isOpen">
-            <slot name="button" />
             <Transition
                 enter-active-class="transition-transform"
                 enter-from-class="rotate-180"
@@ -25,6 +40,7 @@ useEventListener('keyup', e => {
                 <ChevronDownIcon v-if="!isOpen" class="chevron" />
                 <ChevronUpIcon v-else class="chevron" />
             </Transition>
+          <slot name="button" />
         </button>
 
         <Transition
@@ -32,7 +48,10 @@ useEventListener('keyup', e => {
             enter-from-class="opacity-0"
             leave-from-class="transition-opacity"
             leave-to-class="opacity-0">
-            <div v-if="isOpen" class="relative">
+            <div v-if="inline && isOpen">
+              <slot />
+            </div>
+            <div v-else-if="isOpen" class="relative">
                 <div class="z-10 divide-y rounded-b-md absolute">
                     <slot />
                 </div>
@@ -45,6 +64,6 @@ useEventListener('keyup', e => {
 @reference "tailwindcss";
 
 .chevron {
-    @apply w-4 h-4 ms-1;
+    @apply w-4 h-4 me-1;
 }
 </style>