Skip to content

Commit

Permalink
feat: add popper library for beautiful popover positioning (#851)
Browse files Browse the repository at this point in the history 
* feat: add popper library for beautyfull popover positioning

* fix: use refs instead of id

* fix: rebase mistake

* fix: formatting
  • Loading branch information
@FrantisekMichalSebestyen
FrantisekMichalSebestyen committed May 11, 2023
1 parent 551d759 commit 1879b1c
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 14 deletions.
5 changes: 5 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
},
"dependencies": {
"@lottiefiles/lottie-player": "^1.7.1",
"@popperjs/core": "^2.11.7",
"@tailwindcss/line-clamp": "^0.4.2",
"axios": "^1.2.6",
"bootstrap": "^3.4.1",
Expand Down
25 changes: 22 additions & 3 deletions resources/js/components/catalog-new/PopoverFilter.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div class="tw-pb-2 tw-relative">
<div class="tw-pb-2">
<button
ref="button"
class="tw-border tw-border-gray-300 tw-bg-white tw-py-3.5 tw-px-4 tw-text-lg tw-font-bold hover:tw-border-gray-800"
:class="{
'tw-border-gray-800': active,
Expand Down Expand Up @@ -34,14 +35,17 @@
</div>
</div>
</button>
<div @click.stop v-if="isOpen" v-on-clickaway="closeOpenedPopover">
<slot name="body"></slot>
<div ref="body" class="tw-z-50">
<div @click.stop v-if="isOpen" v-on-clickaway="closeOpenedPopover" id="popover">
<slot name="body"></slot>
</div>
</div>
</div>
</template>

<script>
import { directive as onClickaway } from 'vue-clickaway'
import { createPopper } from '@popperjs/core'
export default {
directives: {
Expand All @@ -56,6 +60,21 @@ export default {
return this.popoverGroupControllerData.openedPopover === this.name
},
},
data() {
return {
popper: null,
}
},
mounted() {
const button = this.$refs.button
const body = this.$refs.body
this.popper = createPopper(button, body, {
placement: 'bottom-start',
})
},
updated() {
this.popper.update()
},
inject: ['popoverGroupControllerData', 'togglePopover', 'closeOpenedPopover'],
}
</script>
21 changes: 10 additions & 11 deletions resources/views/frontend/catalog-new/index-new.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class="tw-hidden tw-gap-x-3 tw-overflow-x-auto md:tw-flex md:tw-flex-wrap md:tw-
</template>
<template #body>
<div
class="tw-absolute tw-z-10 tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
class="tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
<filter-new-options filter-name="author"
placeholder="Napíšte meno autora / autorky"
@change="handleMultiSelectChange"
Expand All @@ -42,7 +42,7 @@ class="tw-mb-6 tw-mt-5 tw-flex tw-items-center tw-border tw-border-gray-300 tw-b
</template>
<template #body>
<div
class="tw-absolute tw-z-10 tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
class="tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
<filter-new-options filter-name="work_type"
placeholder="Napíšte meno autora / autorky"
@change="handleMultiSelectChange" :selected-values="query['work_type']"
Expand All @@ -64,7 +64,7 @@ class="tw-mb-6 tw-mt-5 tw-flex tw-items-center tw-border tw-border-gray-300 tw-b
</template>
<template #body>
<div
class="tw-absolute tw-z-10 tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
class="tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
<filter-new-options filter-name="object_type"
placeholder="Napíšte meno autora / autorky"
@change="handleMultiSelectChange" :selected-values="query['object_type']"
Expand All @@ -86,7 +86,7 @@ class="tw-mb-6 tw-mt-5 tw-flex tw-items-center tw-border tw-border-gray-300 tw-b
</template>
<template #body>
<div
class="tw-absolute tw-z-10 tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
class="tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
<filter-new-options filter-name="tag"
placeholder="Napíšte meno autora / autorky"
@change="handleMultiSelectChange" :selected-values="query['tag']"
Expand All @@ -108,7 +108,7 @@ class="tw-mb-6 tw-mt-5 tw-flex tw-items-center tw-border tw-border-gray-300 tw-b
</template>
<template #body>
<div
class="tw-absolute tw-z-10 tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
class="tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
<filter-new-options filter-name="gallery"
placeholder="Napíšte meno autora / autorky"
@change="handleMultiSelectChange" :selected-values="query['gallery']"
Expand All @@ -130,7 +130,7 @@ class="tw-mb-6 tw-mt-5 tw-flex tw-items-center tw-border tw-border-gray-300 tw-b
</template>
<template #body>
<div
class="tw-absolute tw-z-10 tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
class="tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
<filter-new-options filter-name="technique"
placeholder="Napíšte meno autora / autorky"
@change="handleMultiSelectChange" :selected-values="query['technique']"
Expand All @@ -152,7 +152,7 @@ class="tw-mb-6 tw-mt-5 tw-flex tw-items-center tw-border tw-border-gray-300 tw-b
</template>
<template #body>
<div
class="tw-absolute tw-z-10 tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
class="tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
<filter-new-options filter-name="topic"
placeholder="Napíšte meno autora / autorky"
@change="handleMultiSelectChange" :selected-values="query['topic']"
Expand All @@ -174,7 +174,7 @@ class="tw-mb-6 tw-mt-5 tw-flex tw-items-center tw-border tw-border-gray-300 tw-b
</template>
<template #body>
<div
class="tw-absolute tw-z-10 tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
class="tw-mt-4 tw-flex tw-h-[30rem] tw-w-[20rem] tw-flex-col tw-items-start tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6">
<filter-new-options filter-name="medium"
placeholder="Napíšte meno autora / autorky"
@change="handleMultiSelectChange" :selected-values="query['medium']"
Expand All @@ -198,8 +198,7 @@ class="tw-inline-block tw-h-4 tw-w-4"
</div>
</template>
<template #body>
<div
class="tw-absolute tw-left-0 tw-top-36 tw-z-10 tw-w-screen tw-px-16">
<div class="tw-mt-4 tw-w-screen tw-px-16">
<div
class="tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-pt-4">
<div v-if="query.color" class="tw-flex tw-justify-end">
Expand All @@ -224,7 +223,7 @@ class="tw-ml-2"
- @{{ query.yearRange.to }})</div>
</template>
<template #body>
<div class="tw-absolute tw-z-10 tw-mt-4">
<div class="tw-mt-4">
<div
class="tw-w-[28rem] tw-border-2 tw-border-gray-800 tw-bg-white tw-p-6 tw-pt-4">
<div v-if="query.yearRange"
Expand Down

0 comments on commit 1879b1c

Please sign in to comment.