57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<Dropdown :title="title">
|
|
<template #trigger="{ title, open, toggle }">
|
|
<button
|
|
type="button"
|
|
@click="() => toggle()"
|
|
:aria-expanded="open"
|
|
:class="[
|
|
open ? 'text-gray-900' : 'text-gray-500',
|
|
'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
|
]"
|
|
>
|
|
<span>{{ title }}</span>
|
|
<ChevronDownIcon class="ml-2 h-5 w-5" />
|
|
</button>
|
|
</template>
|
|
|
|
<template #default="{ title, open, toggle }">
|
|
<div
|
|
:class="[
|
|
positionClass,
|
|
'absolute z-10 -ml-4 mt-1 w-screen max-w-xs transform px-2 sm:px-0 lg:ml-0',
|
|
]"
|
|
>
|
|
<div
|
|
class="overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ChevronDownIcon } from '@heroicons/vue/24/outline';
|
|
import { computed } from '@vue/reactivity';
|
|
import { onMounted, ref } from 'vue';
|
|
import { onBeforeRouteLeave } from 'vue-router';
|
|
import Dropdown from './Dropdown.vue';
|
|
|
|
const props = defineProps<{
|
|
title: string;
|
|
position?: 'left' | 'center' | 'right';
|
|
}>();
|
|
|
|
const positionClass = computed(() => {
|
|
if (!props.position || props.position === 'center')
|
|
return 'left-1/2 -translate-x-1/2';
|
|
if (props.position === 'left') return 'left-0';
|
|
if (props.position === 'right') return 'right-0';
|
|
return '';
|
|
});
|
|
</script>
|