8000 feat(Popover): manual mode & horizontal offset by nilsso · Pull Request #781 · nuxt/ui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat(Popover): manual mode & horizontal offset #781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 12, 2023
Merged

feat(Popover): manual mode & horizontal offset #781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
444c565
docs: remove `New` badges
benjamincanac Oct 2, 2023
d6412f9
docs: bump `@nuxt/ui-pro`
benjamincanac Oct 3, 2023
c3e51b6
docs(popover): add `panel` slot example
benjamincanac Oct 3, 2023
76b1e89
docs(shortcuts): invalid dropdown items (#778)
Lnunu Oct 4, 2023
eda5221
feat(Popover): Manual mode, horizontal offset
nilsso Oct 4, 2023
8893135
refactor(Popover): rename show to open & add docs
nilsso Oct 5, 2023
3e9fa70
fix popover slot open prop
nilsso Oct 11, 2023
a33248e
fix popover slot (default) open prop
nilsso Oct 11, 2023
d539c91
Merge branch 'dev' into pr/781
benjamincanac Oct 12, 2023
d330bf7
up
benjamincanac Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/components/content/examples/PopoverExampleOpen.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script setup>
const open = ref(false)
</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" />

<template #panel>
<div class="p-4">
<Placeholder class="h-20 w-48" />
</div>
</template>
</UPopover>
</div>
</template>
6 changes: 6 additions & 0 deletions docs/content/6.overlays/3.popover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ Use the `mode` prop to switch between `click` and `hover` modes.

:component-example{component="popover-example-mode"}

### Manual

Use the `open` prop to manually control showing the panel.

:component-example{component="popover-example-open"}

## Slots

### `panel`
Expand Down
22 changes: 16 additions & 6 deletions src/runtime/components/overlays/Popover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
<HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
<HPopoverButton
ref="trigger"
as="div"
Expand All @@ -8,17 +8,17 @@
role="button"
@mouseover="onMouseOver"
>
<slot :open="open" :close="close">
<slot :open="(open !== undefined) ? open : headlessOpen" :close="close">
<button :disabled="disabled">
Open
</button>
</slot>
</HPopoverButton>

<div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
<div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
<Transition appear v-bind="ui.transition">
<HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
<slot name="panel" :open="open" :close="close" />
<slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
</HPopoverPanel>
</Transition>
</div>
Expand Down Expand Up @@ -53,6 +53,10 @@ export default defineComponent({
default: 'click',
validator: (value: string) => ['click', 'hover'].includes(value)
},
open: {
type: Boolean,
default: undefined
},
disabled: {
type: Boolean,
default: false
Expand Down Expand Up @@ -103,8 +107,14 @@ export default defineComponent({

const containerStyle = computed(() => {
const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8

return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
const padding = `${offsetDistance}px`

return props.mode === 'hover' ? {
paddingTop: padding,
paddingBottom: padding,
paddingLeft: padding,
paddingRight: padding
} : {}
})

function onMouseOver () {
Expand Down
0