42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<template>
|
|
<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="absolute z-10 -ml-4 mt-3 w-screen max-w-xs transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2"
|
|
>
|
|
<div
|
|
class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ChevronDownIcon } from '@heroicons/vue/24/outline';
|
|
import { onMounted, ref } from 'vue';
|
|
import { onBeforeRouteLeave } from 'vue-router';
|
|
import Dropdown from '../Dropdown.vue';
|
|
|
|
const props = defineProps<{
|
|
title: string;
|
|
}>();
|
|
</script>
|