Notivue - Add feature to disable teleport

smastrom · Jan 27, 2024 · 7eb64a9 · 7eb64a9
1 parent e73e6bc
commit 7eb64a9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/notivue/Notivue/NotivueImpl.vue b/packages/notivue/Notivue/NotivueImpl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, Teleport } from 'vue'
+import { Teleport } from 'vue'
 
 import AriaLive from './AriaLive.vue'
 
@@ -34,20 +34,18 @@ const touchEvents = useTouchEvents()
 useReducedMotion()
 useVisibilityChange()
 useRepositioning()
-
-// Computed
-
-const dataAlign = computed(() => ({
-   'data-notivue-align': config.isTopAlign.value ? 'top' : 'bottom',
-}))
 </script>
 
 <template>
-   <Teleport :to="config.teleportTo.value">
+   <Teleport
+      :to="config.teleportTo.value === false ? undefined : config.teleportTo.value"
+      :disabled="config.teleportTo.value === false"
+   >
       <!-- List Container -->
       <ol
          v-if="items.length > 0"
-         v-bind="{ ...mouseEvents, ...touchEvents, ...elements.rootAttrs.value, ...dataAlign }"
+         v-bind="{ ...mouseEvents, ...touchEvents, ...elements.rootAttrs.value }"
+         :data-notivue-align="config.isTopAlign.value ? 'top' : 'bottom'"
          :aria-label="props.listAriaLabel"
          :ref="elements.root"
          :style="styles.stream"

diff --git a/packages/notivue/core/types.ts b/packages/notivue/core/types.ts
@@ -74,7 +74,7 @@ export interface NotivueConfig {
    /** Animation classes for `enter`, `leave` and `clearAll`. */
    animations?: NotivueAnimations
    /** Tag or element to which the stream will be teleported. */
-   teleportTo?: string | HTMLElement
+   teleportTo?: string | HTMLElement | false
    /** Notifications limit. Defaults to `Infinity`. */
    limit?: number
 }