feat(popper): arrow option & docs consistency across components (#875)

This commit is contained in:
Conner
2023-10-27 08:03:06 -05:00
committed by GitHub
parent 4ce23746da
commit f785ecd46f
22 changed files with 412 additions and 101 deletions

View File

@@ -1,8 +1,11 @@
<template>
<div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
<Transition appear v-bind="ui.transition">
<div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
<slot />
<div>
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
<div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
<slot />
</div>
</div>
</Transition>
</div>
@@ -85,6 +88,8 @@ export default defineComponent({
attrs,
isOpen,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
popper,
container
}
}

View File

@@ -17,9 +17,12 @@
<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 !== undefined) ? open : headlessOpen" :close="close" />
</HPopoverPanel>
<div>
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
<HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
<slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
</HPopoverPanel>
</div>
</Transition>
</div>
</HPopover>
@@ -162,6 +165,8 @@ export default defineComponent({
ui,
attrs,
popover,
// eslint-disable-next-line vue/no-dupe-keys
popper,
trigger,
container,
containerStyle,