diff --git a/package.json b/package.json index c2bbfe48..3b9fc1d1 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ }, "dependencies": { "@headlessui/vue": "^1.4.2", + "@popperjs/core": "^2.10.2", "@unocss/nuxt": "^0.9.3", "gradient-avatar": "^1.0.2", "pathe": "^0.2.0" diff --git a/src/index.ts b/src/index.ts index 2f0c2cd3..10783ac1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -116,5 +116,7 @@ export default defineNuxtModule({ prefix: _prefix }) }) + + nuxt.options.build.transpile.push('@popperjs/core') } }) diff --git a/src/utils/popper.ts b/src/utils/popper.ts new file mode 100644 index 00000000..a8c5f3e4 --- /dev/null +++ b/src/utils/popper.ts @@ -0,0 +1,26 @@ +import { ref, onMounted, watchEffect } from 'vue' +import { createPopper } from '@popperjs/core' + +export function usePopper (options: object) { + const reference = ref(null) + const popper = ref(null) + + onMounted(() => { + watchEffect((onInvalidate) => { + if (!popper.value) { return } + if (!reference.value) { return } + + const popperEl = popper.value.el || popper.value + const referenceEl = reference.value.el || reference.value + + if (!(referenceEl instanceof HTMLElement)) { return } + if (!(popperEl instanceof HTMLElement)) { return } + + const { destroy } = createPopper(referenceEl, popperEl, options) + + onInvalidate(destroy) + }) + }) + + return [reference, popper] +} diff --git a/yarn.lock b/yarn.lock index 99e38a2a..0673393a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -599,6 +599,11 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1" integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== +"@popperjs/core@^2.10.2": + version "2.10.2" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590" + integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ== + "@rollup/plugin-alias@^3.1.8": version "3.1.8" resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-3.1.8.tgz#645fd84659e08d3d1b059408fcdf69c1dd435a6b"