2
0
mirror of https://github.com/frappe/books.git synced 2024-09-20 03:29:00 +00:00

fix(ui): remove popover space and arrow

This commit is contained in:
18alantom 2022-06-20 12:00:52 +05:30
parent 6f0a5ab23d
commit 4fbcd9da5f

View File

@ -13,7 +13,6 @@
class="bg-white rounded border shadow-md popover-container relative z-10" class="bg-white rounded border shadow-md popover-container relative z-10"
v-show="isOpen" v-show="isOpen"
> >
<div v-if="!hideArrow" class="popover-arrow" ref="popover-arrow"></div>
<slot name="content" :togglePopover="togglePopover"></slot> <slot name="content" :togglePopover="togglePopover"></slot>
</div> </div>
</div> </div>
@ -27,10 +26,6 @@ export default {
name: 'Popover', name: 'Popover',
emits: ['open', 'close'], emits: ['open', 'close'],
props: { props: {
hideArrow: {
type: Boolean,
default: false,
},
showPopup: { showPopup: {
default: null, default: null,
}, },
@ -84,22 +79,6 @@ export default {
if (!this.popper) { if (!this.popper) {
this.popper = createPopper(this.$refs.reference, this.$refs.popover, { this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
placement: this.placement, placement: this.placement,
modifiers: !this.hideArrow
? [
{
name: 'arrow',
options: {
element: this.$refs['popover-arrow'],
},
},
{
name: 'offset',
options: {
offset: [0, 10],
},
},
]
: [],
}); });
} else { } else {
this.popper.update(); this.popper.update();
@ -139,46 +118,3 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.popover-arrow,
.popover-arrow::after {
position: absolute;
width: theme('spacing.4');
height: theme('spacing.4');
z-index: -1;
}
.popover-arrow::after {
content: '';
background: white;
transform: rotate(45deg);
}
.popover-container[data-popper-placement^='top'] > .popover-arrow {
bottom: calc(theme('spacing.2') * -1);
}
.popover-container[data-popper-placement^='top'] > .popover-arrow::after {
border-bottom: 1px solid theme('borderColor.gray.400');
border-right: 1px solid theme('borderColor.gray.400');
border-bottom-right-radius: 6px;
}
.popover-container[data-popper-placement^='bottom'] > .popover-arrow {
top: calc(theme('spacing.2') * -1);
}
.popover-container[data-popper-placement^='bottom'] > .popover-arrow::after {
border-top: 1px solid theme('borderColor.gray.400');
border-left: 1px solid theme('borderColor.gray.400');
border-top-left-radius: 6px;
}
.popover-container[data-popper-placement^='left'] > .popover-arrow {
right: calc(theme('spacing.2') * -1);
}
.popover-container[data-popper-placement^='right'] > .popover-arrow {
left: calc(theme('spacing.2') * -1);
}
</style>