68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<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>
|