first commit

components/Ml/DropDown/MlDropDown.vue

@@ -0,0 +1,62 @@
+<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>
+</template>
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge';
+import type { DropDownProps, DropDownPT } from './types';
+
+const props = withDefaults(defineProps<DropDownProps>(), {
+    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'
+    }
+} 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;
+}
+
+function closeDropDown() {
+    isOpen.value = false;
+}
+
+const isMenuOpen = computed(() => isOpen.value);
+</script>

components/Ml/DropDown/MlDropDownItem.vue

@@ -0,0 +1,20 @@
+<template>
+    <div :class="rootPT">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+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 };
+};