fix(Popover): allow manual mode without blocking normal behaviour

This commit is contained in:
Benjamin Canac
2024-01-03 16:51:20 +01:00
parent 3844714644
commit 3334e2af3d
4 changed files with 49 additions and 36 deletions

View File

@@ -1,18 +1,19 @@
<script setup>
const open = ref(false)
const open = ref(true)
defineShortcuts({
o: () => open.value = !open.value
})
</script>
<template>
<div class="flex gap-4 items-center">
<UToggle v-model="open" />
<UPopover :open="open">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<UPopover v-model:open="open">
<UButton color="white" :label="open.toString()" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</div>
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>

View File

@@ -1,13 +1,11 @@
<template>
<div class="flex gap-4 items-center">
<UPopover overlay>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<UPopover overlay>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</div>
<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</template>