add changes

src/components/Ml/DropDown/MlDropDown.vue

@@ -1,61 +1,71 @@
 <template>
-    <div v-click-outside="closeDropDown" :class="rootPT">
-        <button
-            id="dropdownDefaultButton"
-            data-dropdown-toggle="dropdown"
-            :class="titlePT"
-            type="button"
-            @click="
-                useRipple($event, props.ripple);
-                openMenu();
-            "
-        >
-            {{ props.title }}
-            <span :class="arrowPT">
-                <ml-arrow></ml-arrow>
-            </span>
-        </button>
-        <div v-show="isMenuOpen" :class="dropdownPT" @click="isOpen = false">
-            <slot />
-        </div>
+  <div v-click-outside="closeDropDown" :class="rootPT">
+    <button
+      id="dropdownDefaultButton"
+      data-dropdown-toggle="dropdown"
+      :class="titlePT"
+      type="button"
+      @click="
+        useRipple($event, props.ripple);
+        openMenu();
+      "
+    >
+      {{ props.title }}
+      <span :class="arrowPT">
+        <ml-arrow></ml-arrow>
+      </span>
+    </button>
+    <div v-show="isMenuOpen" :class="dropdownPT" @click="isOpen = false">
+      <slot />
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { twMerge } from 'tailwind-merge';
-import type { DropDownProps, DropDownPT } from './types';
+import { computed, ref } from "vue";
+import { useRipple } from "#imports";
+import { twMerge } from "tailwind-merge";
+import type { DropDownProps, DropDownPT } from "./types";
 
 const props = withDefaults(defineProps<DropDownProps>(), {
-    isOpen: false
+  isOpen: false,
 });
 
 const PT = {
-    root: {
-        class: 'relative pointer'
-    },
-    dropdown: {
-        class: 'z-10 absolute bg-white dark:bg-BgDark/85 rounded-3xl pointer text-black dark:text-white text-center'
-    },
-    title: {
-        class: 'text-black dark:text-BgLight inline-flex items-center rounded-lg font-medium text-center text-base pointer '
-    },
-    arrow: {
-        class: 'px-2'
-    }
+  root: {
+    class: "relative pointer",
+  },
+  dropdown: {
+    class:
+      "z-10 absolute bg-white rounded-3xl pointer text-black text-center",
+  },
+  title: {
+    class:
+      "text-black inline-flex items-center rounded-lg font-medium text-center text-base pointer ",
+  },
+  arrow: {
+    class: "px-2",
+  },
 } as DropDownPT;
 
 const rootPT = computed(() => twMerge(PT.root?.class, props.pt?.root?.class));
-const titlePT = computed(() => twMerge(PT.title?.class, props.pt?.title?.class));
-const dropdownPT = computed(() => twMerge(PT.dropdown?.class, props.pt?.dropdown?.class));
-const arrowPT = computed(() => twMerge(PT.arrow?.class, props.pt?.arrow?.class));
+const titlePT = computed(() =>
+  twMerge(PT.title?.class, props.pt?.title?.class)
+);
+const dropdownPT = computed(() =>
+  twMerge(PT.dropdown?.class, props.pt?.dropdown?.class)
+);
+const arrowPT = computed(() =>
+  twMerge(PT.arrow?.class, props.pt?.arrow?.class)
+);
 
 const isOpen = ref(props.isOpen);
 
 function openMenu() {
-    isOpen.value = !isOpen.value;
+  isOpen.value = !isOpen.value;
 }
 
 function closeDropDown() {
-    isOpen.value = false;
+  isOpen.value = false;
 }
 
 const isMenuOpen = computed(() => isOpen.value);

src/components/Ml/DropDown/MlDropDownItem.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import { twMerge } from 'tailwind-merge';
 import type { DropDownItemPT, DropDownItemProps } from './types';