add changes

components/Ml/DropDown/MlDropDown.vue

@@ -0,0 +1,67 @@
+<template>
+  <div :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 { 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,
+});
+
+const PT = {
+  root: {
+    class: "",
+  },
+  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 isOpen = ref(props.isOpen);
+
+function openMenu() {
+  isOpen.value = !isOpen.value;
+}
+
+const isMenuOpen = computed(() => isOpen.value);
+</script>

components/Ml/DropDown/MlDropDownItem.vue

@@ -0,0 +1,21 @@
+<template>
+    <div :class="rootPT">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { twMerge } from 'tailwind-merge';
+import type { DropDownItemPT, DropDownItemProps } from './types';
+
+const props = withDefaults(defineProps<DropDownItemProps>(), {});
+
+const PT = {
+    root: {
+        class: ''
+    }
+} as DropDownItemPT;
+
+const rootPT = computed(() => twMerge(PT.root?.class, props.pt?.root?.class));
+</script>

components/Ml/DropDown/types.ts

@@ -0,0 +1,21 @@
+export type DropDownProps = {
+    pt?: DropDownPT;
+    isOpen?: boolean;
+    title: string;
+    ripple?: boolean;
+};
+
+export type DropDownPT = {
+    root?: { class: string };
+    title?: { class: string };
+    dropdown?: { class: string };
+    arrow?: { class: string };
+};
+
+export type DropDownItemProps = {
+    pt?: DropDownItemPT;
+};
+
+export type DropDownItemPT = {
+    root?: { class: string };
+};