arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-17 21:48:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/components/content/examples/PopoverExampleOpen.vue
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>

18
docs/components/content/examples/PopoverExampleOverlay.vue
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>

6
docs/content/6.overlays/3.popover.md
View File

@@ -21,7 +21,7 @@ Use the `mode` prop to switch between `click` and `hover` modes.
### Manual
Use the `open` prop to manually control showing the panel.
Use a `v-model:open` to manually control the state. In this example, press :shortcut{value="O"} to toggle the popover.
:component-example{component="popover-example-open"}
@@ -29,10 +29,6 @@ Use the `open` prop to manually control showing the panel.
:component-example{component="popover-example-overlay"}
::callout{icon="i-heroicons-light-bulb"}
Clicking on the `overlay` emits `update:open`. If you are manually controlling the `open` prop, you will need to use a [`v-model` argument](https://vuejs.org/guide/components/v-model.html#v-model-arguments) (`v-model:open`).
::
## Popper
Use the `popper` prop to customize the popper instance.