From ae947ebd0734caa9838bcf28297ce452ae0162d4 Mon Sep 17 00:00:00 2001
From: Gustavo Maronato <gustavo@maronato.dev>
Date: Sun, 24 Oct 2021 14:08:18 -0300
Subject: [PATCH] toast composables

---
 src/components/VtProgressBar.vue    |   8 +-
 src/components/VtToast.vue          | 267 +++++++---------------------
 src/components/VtToastContainer.vue | 218 +++++++++++------------
 src/components/VtTransition.vue     |  10 +-
 src/index.ts                        |  89 ++--------
 src/ts/composables/useDraggable.ts  | 111 ++++++++++++
 src/ts/composables/useEventBus.ts   |  18 ++
 src/ts/composables/useFocusable.ts  |  26 +++
 src/ts/composables/useHoverable.ts  |  27 +++
 src/ts/composables/useToast.ts      |  83 +++++++++
 src/ts/interface.ts                 | 236 +++++++++++++-----------
 src/ts/propValidators.ts            |  17 +-
 src/ts/utils.ts                     |  10 ++
 src/types/index.ts                  |   5 +-
 14 files changed, 601 insertions(+), 524 deletions(-)
 create mode 100644 src/ts/composables/useDraggable.ts
 create mode 100644 src/ts/composables/useEventBus.ts
 create mode 100644 src/ts/composables/useFocusable.ts
 create mode 100644 src/ts/composables/useHoverable.ts
 create mode 100644 src/ts/composables/useToast.ts

diff --git a/src/components/VtProgressBar.vue b/src/components/VtProgressBar.vue
index 3d0f311..a063a99 100644
--- a/src/components/VtProgressBar.vue
+++ b/src/components/VtProgressBar.vue
@@ -13,9 +13,7 @@ export default defineComponent({
 
   props: PROPS.PROGRESS_BAR,
 
-  // TODO: The typescript compiler is not playing nice with emit types
-  // Rollback this change once ts is able to infer emit types
-  // emits: ["close-toast"],
+  emits: ["closeToast"],
 
   data() {
     return {
@@ -58,9 +56,7 @@ export default defineComponent({
 
   methods: {
     animationEnded() {
-      // See TODO on line 16
-      // eslint-disable-next-line vue/require-explicit-emits
-      this.$emit("close-toast")
+      this.$emit("closeToast")
     },
   },
 })
diff --git a/src/components/VtToast.vue b/src/components/VtToast.vue
index b69985e..b55afd9 100644
--- a/src/components/VtToast.vue
+++ b/src/components/VtToast.vue
@@ -1,11 +1,5 @@
 <template>
-  <div
-    :class="classes"
-    :style="draggableStyle"
-    @click="clickHandler"
-    @mouseenter="hoverPause"
-    @mouseleave="hoverPlay"
-  >
+  <div ref="el" :class="classes" @click="clickHandler">
     <Icon v-if="icon" :custom-icon="icon" :type="type" />
     <div :role="accessibility.toastRole || 'alert'" :class="bodyClasses">
       <template v-if="typeof content === 'string'">{{ content }}</template>
@@ -13,8 +7,8 @@
         :is="getVueComponentFromObj(content)"
         v-else
         :toast-id="id"
-        v-bind="hasProp(content, 'props') ? content.props : {}"
-        v-on="hasProp(content, 'listeners') ? content.listeners : {}"
+        v-bind="getProp(content, 'props', {})"
+        v-on="getProp(content, 'listeners', {})"
         @closeToast="closeToast"
       />
     </div>
@@ -31,28 +25,25 @@
       :is-running="isRunning"
       :hide-progress-bar="hideProgressBar"
       :timeout="timeout"
-      @closeToast="timeoutHandler"
+      @closeToast="closeToast"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, ref, computed, watch, nextTick } from "vue"
 
 import { EVENTS, VT_NAMESPACE } from "../ts/constants"
 import PROPS from "../ts/propValidators"
-import {
-  getVueComponentFromObj,
-  isString,
-  getX,
-  getY,
-  isDOMRect,
-  hasProp,
-} from "../ts/utils"
+import { getVueComponentFromObj, isString, getProp } from "../ts/utils"
 
 import ProgressBar from "./VtProgressBar.vue"
 import CloseButton from "./VtCloseButton.vue"
 import Icon from "./VtIcon.vue"
+import { useEventBus } from "../ts/composables/useEventBus"
+import { useHoverable } from "../ts/composables/useHoverable"
+import { useFocusable } from "../ts/composables/useFocusable"
+import { useDraggable } from "../ts/composables/useDraggable"
 
 export default defineComponent({
   name: "VtToast",
@@ -62,204 +53,74 @@ export default defineComponent({
 
   props: Object.assign({}, PROPS.CORE_TOAST, PROPS.TOAST),
 
-  data() {
-    const data: {
-      dragRect: DOMRect | Record<string, unknown>
-      isRunning: boolean
-      disableTransitions: boolean
-      beingDragged: boolean
-      dragStart: number
-      dragPos: { x: number; y: number }
-    } = {
-      isRunning: true,
-      disableTransitions: false,
+  setup(props) {
+    const el = ref<HTMLElement | null>(null)
 
-      beingDragged: false,
-      dragStart: 0,
-      dragPos: { x: 0, y: 0 },
-      dragRect: {},
+    const eventBus = useEventBus()
+    const { hovering } = useHoverable(el, props)
+    const { focused } = useFocusable(el, props)
+    const { beingDragged, dragComplete } = useDraggable(el, props)
+
+    const isRunning = computed(
+      () => !hovering.value && focused.value && !beingDragged.value
+    )
+
+    const closeToast = () => {
+      eventBus.emit(EVENTS.DISMISS, props.id)
     }
-    return data
-  },
 
-  computed: {
-    classes(): string[] {
-      const classes = [
-        `${VT_NAMESPACE}__toast`,
-        `${VT_NAMESPACE}__toast--${this.type}`,
-        `${this.position}`,
-      ].concat(this.toastClassName)
-      if (this.disableTransitions) {
-        classes.push("disable-transition")
-      }
-      if (this.rtl) {
-        classes.push(`${VT_NAMESPACE}__toast--rtl`)
-      }
-      return classes
-    },
-    bodyClasses(): string[] {
-      const classes = [
-        `${VT_NAMESPACE}__toast-${
-          isString(this.content) ? "body" : "component-body"
-        }`,
-      ].concat(this.bodyClassName)
-      return classes
-    },
-    draggableStyle(): {
-      transition?: string
-      opacity?: number
-      transform?: string
-    } {
-      if (this.dragStart === this.dragPos.x) {
-        return {}
-      } else if (this.beingDragged) {
-        return {
-          transform: `translateX(${this.dragDelta}px)`,
-          opacity: 1 - Math.abs(this.dragDelta / this.removalDistance),
+    const clickHandler = () => {
+      if (!beingDragged.value) {
+        if (props.onClick) {
+          props.onClick(closeToast)
         }
-      } else {
-        return {
-          transition: "transform 0.2s, opacity 0.2s",
-          transform: "translateX(0)",
-          opacity: 1,
+        if (props.closeOnClick) {
+          closeToast()
         }
       }
-    },
-    dragDelta(): number {
-      return this.beingDragged ? this.dragPos.x - this.dragStart : 0
-    },
-    removalDistance(): number {
-      if (isDOMRect(this.dragRect)) {
-        return (
-          (this.dragRect.right - this.dragRect.left) * this.draggablePercent
-        )
-      }
-      return 0
-    },
-  },
-
-  mounted() {
-    if (this.draggable) {
-      this.draggableSetup()
-    }
-    if (this.pauseOnFocusLoss) {
-      this.focusSetup()
-    }
-  },
-  beforeUnmount() {
-    if (this.draggable) {
-      this.draggableCleanup()
-    }
-    if (this.pauseOnFocusLoss) {
-      this.focusCleanup()
     }
-  },
 
-  methods: {
-    hasProp,
-    getVueComponentFromObj,
-    closeToast() {
-      this.eventBus.emit(EVENTS.DISMISS, this.id)
-    },
-    clickHandler() {
-      if (this.onClick) {
-        this.onClick(this.closeToast)
-      }
-      if (this.closeOnClick) {
-        if (!this.beingDragged || this.dragStart === this.dragPos.x) {
-          this.closeToast()
-        }
+    watch(dragComplete, v => {
+      if (v) {
+        nextTick(() => closeToast())
       }
-    },
-    timeoutHandler() {
-      this.closeToast()
-    },
-    hoverPause() {
-      if (this.pauseOnHover) {
-        this.isRunning = false
+    })
+
+    const classes = computed(() => {
+      const classes = [
+        `${VT_NAMESPACE}__toast`,
+        `${VT_NAMESPACE}__toast--${props.type}`,
+        `${props.position}`,
+      ].concat(props.toastClassName || [])
+
+      if (dragComplete.value) {
+        classes.push("disable-transition")
       }
-    },
-    hoverPlay() {
-      if (this.pauseOnHover) {
-        this.isRunning = true
+      if (props.rtl) {
+        classes.push(`${VT_NAMESPACE}__toast--rtl`)
       }
-    },
-    focusPause() {
-      this.isRunning = false
-    },
-    focusPlay() {
-      this.isRunning = true
-    },
 
-    focusSetup() {
-      addEventListener("blur", this.focusPause)
-      addEventListener("focus", this.focusPlay)
-    },
-    focusCleanup() {
-      removeEventListener("blur", this.focusPause)
-      removeEventListener("focus", this.focusPlay)
-    },
+      return classes
+    })
 
-    draggableSetup() {
-      const element = this.$el as HTMLElement
-      element.addEventListener("touchstart", this.onDragStart, {
-        passive: true,
-      })
-      element.addEventListener("mousedown", this.onDragStart)
-      addEventListener("touchmove", this.onDragMove, { passive: false })
-      addEventListener("mousemove", this.onDragMove)
-      addEventListener("touchend", this.onDragEnd)
-      addEventListener("mouseup", this.onDragEnd)
-    },
-    draggableCleanup() {
-      const element = this.$el as HTMLElement
-      element.removeEventListener("touchstart", this.onDragStart)
-      element.removeEventListener("mousedown", this.onDragStart)
-      removeEventListener("touchmove", this.onDragMove)
-      removeEventListener("mousemove", this.onDragMove)
-      removeEventListener("touchend", this.onDragEnd)
-      removeEventListener("mouseup", this.onDragEnd)
-    },
+    const bodyClasses = computed(() =>
+      [
+        `${VT_NAMESPACE}__toast-${
+          isString(props.content) ? "body" : "component-body"
+        }`,
+      ].concat(props.bodyClassName || [])
+    )
 
-    onDragStart(event: TouchEvent | MouseEvent) {
-      this.beingDragged = true
-      this.dragPos = { x: getX(event), y: getY(event) }
-      this.dragStart = getX(event)
-      this.dragRect = this.$el.getBoundingClientRect()
-    },
-    onDragMove(event: TouchEvent | MouseEvent) {
-      if (this.beingDragged) {
-        event.preventDefault()
-        if (this.isRunning) {
-          this.isRunning = false
-        }
-        this.dragPos = { x: getX(event), y: getY(event) }
-      }
-    },
-    onDragEnd() {
-      if (this.beingDragged) {
-        if (Math.abs(this.dragDelta) >= this.removalDistance) {
-          this.disableTransitions = true
-          this.$nextTick(() => this.closeToast())
-        } else {
-          setTimeout(() => {
-            this.beingDragged = false
-            if (
-              isDOMRect(this.dragRect) &&
-              this.pauseOnHover &&
-              this.dragRect.bottom >= this.dragPos.y &&
-              this.dragPos.y >= this.dragRect.top &&
-              this.dragRect.left <= this.dragPos.x &&
-              this.dragPos.x <= this.dragRect.right
-            ) {
-              this.isRunning = false
-            } else {
-              this.isRunning = true
-            }
-          })
-        }
-      }
-    },
+    return {
+      isRunning,
+      classes,
+      bodyClasses,
+      clickHandler,
+      getVueComponentFromObj,
+      getProp,
+      closeToast,
+      el,
+    }
   },
 })
 </script>
diff --git a/src/components/VtToastContainer.vue b/src/components/VtToastContainer.vue
index 0d07392..9a7aef9 100644
--- a/src/components/VtToastContainer.vue
+++ b/src/components/VtToastContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div ref="el">
     <div v-for="pos in positions" :key="pos">
       <VtTransition :transition="defaults.transition" :class="getClasses(pos)">
         <Toast
@@ -13,14 +13,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import {
+  defineComponent,
+  ref,
+  reactive,
+  computed,
+  onMounted,
+  onBeforeMount,
+} from "vue"
 
 import { EVENTS, POSITION, VT_NAMESPACE } from "../ts/constants"
-import PROPS, { PluginOptionsType } from "../ts/propValidators"
+import PROPS from "../ts/propValidators"
 import {
-  PluginOptions,
+  ContainerOptions,
   ToastID,
-  ToastOptionsAndContent,
+  ToastOptions,
   ToastOptionsAndRequiredContent,
 } from "../types"
 import {
@@ -28,10 +35,16 @@ import {
   isUndefined,
   isFunction,
   normalizeToastComponent,
+  getProp,
 } from "../ts/utils"
 
 import Toast from "./VtToast.vue"
 import VtTransition from "./VtTransition.vue"
+import { useEventBus } from "../ts/composables/useEventBus"
+
+interface ToastRecord {
+  [id: ToastID]: ToastOptionsAndRequiredContent
+}
 
 export default defineComponent({
   name: "VueToastification",
@@ -42,124 +55,109 @@ export default defineComponent({
 
   props: Object.assign({}, PROPS.CORE_TOAST, PROPS.CONTAINER, PROPS.TRANSITION),
 
-  data() {
-    const data: {
-      count: number
-      positions: POSITION[]
-      toasts: {
-        [toastId: number]: ToastOptionsAndRequiredContent
-        [toastId: string]: ToastOptionsAndRequiredContent
+  setup(_props) {
+    const toastRecord = reactive<ToastRecord>({})
+    const el = ref<HTMLElement | null>(null)
+    const props = { ..._props } as Required<ContainerOptions>
+
+    const toastArray = computed(() =>
+      Object.values(toastRecord).filter(
+        (toast): toast is ToastOptionsAndRequiredContent => !isUndefined(toast)
+      )
+    )
+    const filteredToasts = computed(() => props.filterToasts(toastArray.value))
+
+    const setupContainer = async (
+      providedContainer: ContainerOptions["container"]
+    ) => {
+      const container = isFunction(providedContainer)
+        ? await providedContainer()
+        : providedContainer
+      if (el.value && container) {
+        removeElement(el.value)
+        container.appendChild(el.value)
       }
-      defaults: PluginOptionsType
-    } = {
-      count: 0,
-      positions: Object.values(POSITION),
-      toasts: {},
-      defaults: {} as PluginOptionsType,
     }
-    return data
-  },
 
-  computed: {
-    toastArray(): ToastOptionsAndRequiredContent[] {
-      return Object.values(this.toasts)
-    },
-    filteredToasts(): ToastOptionsAndRequiredContent[] {
-      return this.defaults.filterToasts(this.toastArray)
-    },
-  },
+    const setToast = (toast: ToastOptionsAndRequiredContent) =>
+      !isUndefined(toast.id) && (toastRecord[toast.id] = toast)
+    const addToast = (toast: ToastOptionsAndRequiredContent) => {
+      toast.content = normalizeToastComponent(toast.content)
+      const typeDefaults = getProp(props.toastDefaults, toast.type || "", {})
+      const toastProps = { ...props, ...typeDefaults, ...toast }
+      const filteredToast = props.filterBeforeCreate(
+        toastProps,
+        toastArray.value
+      )
+      if (filteredToast) {
+        setToast(filteredToast)
+      }
+    }
 
-  beforeMount() {
-    const events = this.eventBus
-    events.on(EVENTS.ADD, this.addToast)
-    events.on(EVENTS.CLEAR, this.clearToasts)
-    events.on(EVENTS.DISMISS, this.dismissToast)
-    events.on(EVENTS.UPDATE, this.updateToast)
-    events.on(EVENTS.UPDATE_DEFAULTS, this.updateDefaults)
-    this.defaults = this.$props as unknown as PluginOptionsType
-  },
+    const dismissToast = (toastID?: ToastID) => {
+      if (toastID) {
+        const toast = toastRecord[toastID]
+        if (toast && toast.onClose) {
+          toast.onClose()
+        }
+        delete toastRecord[toastID]
+      }
+    }
 
-  mounted() {
-    this.setup(this.container as PluginOptionsType["container"])
-  },
+    const clearToasts = () => toastArray.value.forEach(t => dismissToast(t.id))
 
-  methods: {
-    async setup(container: PluginOptionsType["container"]) {
-      if (isFunction(container)) {
-        container = await container()
-      }
-      removeElement(this.$el)
-      container.appendChild(this.$el)
-    },
-    setToast(props: ToastOptionsAndRequiredContent) {
-      if (!isUndefined(props.id)) {
-        this.toasts[props.id] = props
-      }
-    },
-    addToast(params: ToastOptionsAndRequiredContent) {
-      params.content = normalizeToastComponent(params.content)
-      const props = Object.assign(
-        {},
-        this.defaults,
-        params.type &&
-          this.defaults.toastDefaults &&
-          this.defaults.toastDefaults[params.type],
-        params
-      )
-      const toast = this.defaults.filterBeforeCreate(props, this.toastArray)
-      toast && this.setToast(toast)
-    },
-    dismissToast(id: ToastID) {
-      const toast = this.toasts[id]
-      if (!isUndefined(toast) && !isUndefined(toast.onClose)) {
-        toast.onClose()
-      }
-      delete this.toasts[id]
-    },
-    clearToasts() {
-      Object.keys(this.toasts).forEach((id: ToastID) => {
-        this.dismissToast(id)
-      })
-    },
-    getPositionToasts(position: POSITION) {
-      const toasts = this.filteredToasts
-        .filter(toast => toast.position === position)
-        .slice(0, this.defaults.maxToasts)
-      return this.defaults.newestOnTop ? toasts.reverse() : toasts
-    },
-    updateDefaults(update: PluginOptions) {
-      // Update container if changed
-      if (!isUndefined(update.container)) {
-        this.setup(update.container)
+    const getPositionToasts = (position: POSITION) => {
+      const toasts = filteredToasts.value
+        .filter(t => t.position === position)
+        .slice(0, props.maxToasts)
+      return props.newestOnTop ? toasts.reverse() : toasts
+    }
+
+    const updateDefaults = (update: ContainerOptions) => {
+      if (update.container) {
+        setupContainer(update.container)
       }
-      this.defaults = Object.assign({}, this.defaults, update)
-    },
-    updateToast({
-      id,
-      options,
-      create,
-    }: {
+      Object.assign(props, update)
+    }
+
+    const updateToast: (update: {
       id: ToastID
-      options: ToastOptionsAndContent
+      options: ToastOptions
       create: boolean
-    }) {
-      if (this.toasts[id]) {
-        // If a timeout is defined, and is equal to the one before, change it
-        // a little so the progressBar is reset
-        if (options.timeout && options.timeout === this.toasts[id].timeout) {
+    }) => void = ({ id, options, create }) => {
+      if (toastRecord[id]) {
+        if (options.timeout && options.timeout === toastRecord[id].timeout) {
           options.timeout++
         }
-        this.setToast(Object.assign({}, this.toasts[id], options))
+        setToast({ ...toastRecord[id], ...options })
       } else if (create) {
-        this.addToast(
-          Object.assign({}, { id }, options as ToastOptionsAndRequiredContent)
-        )
+        // @ts-expect-error Options may not actually have ID
+        addToast({ id, ...options })
       }
-    },
-    getClasses(position: POSITION) {
-      const classes = [`${VT_NAMESPACE}__container`, position]
-      return classes.concat(this.defaults.containerClassName)
-    },
+    }
+
+    const getClasses = (position: POSITION) =>
+      [`${VT_NAMESPACE}__container`, position].concat(props.containerClassName)
+
+    const events = useEventBus()
+    onBeforeMount(() => {
+      events.on(EVENTS.ADD, addToast)
+      events.on(EVENTS.CLEAR, clearToasts)
+      events.on(EVENTS.DISMISS, dismissToast)
+      events.on(EVENTS.UPDATE, updateToast)
+      events.on(EVENTS.UPDATE_DEFAULTS, updateDefaults)
+    })
+    onMounted(() => {
+      setupContainer(props.container)
+    })
+
+    return {
+      positions: POSITION,
+      defaults: props,
+      getClasses,
+      getPositionToasts,
+      el,
+    }
   },
 })
 </script>
diff --git a/src/components/VtTransition.vue b/src/components/VtTransition.vue
index 543944d..4f59556 100644
--- a/src/components/VtTransition.vue
+++ b/src/components/VtTransition.vue
@@ -2,11 +2,11 @@
   <transition-group
     tag="div"
     :enter-active-class="
-      transition.enter ? transition.enter : `${transition}-enter-active`
+      getProp(transition, 'enter', `${transition}-enter-active`)
     "
-    :move-class="transition.move ? transition.move : `${transition}-move`"
+    :move-class="getProp(transition, 'move', `${transition}-move`)"
     :leave-active-class="
-      transition.leave ? transition.leave : `${transition}-leave-active`
+      getProp(transition, 'leave', `${transition}-leave-active`)
     "
     @leave="leave"
   >
@@ -16,7 +16,7 @@
 <script lang="ts">
 // Transition methods taken from https://github.com/BinarCode/vue2-transitions
 import { defineComponent } from "vue"
-import { hasProp } from "../ts/utils"
+import { getProp } from "../ts/utils"
 import PROPS from "../ts/propValidators"
 
 export default defineComponent({
@@ -26,7 +26,7 @@ export default defineComponent({
   emits: ["leave"],
 
   methods: {
-    hasProp,
+    getProp,
     leave(el: Element) {
       if (el instanceof HTMLElement) {
         el.style.left = el.offsetLeft + "px"
diff --git a/src/index.ts b/src/index.ts
index 451cec7..3f407af 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,86 +1,17 @@
-import { Plugin, InjectionKey, provide, inject, getCurrentInstance } from "vue"
-import { buildInterface } from "./ts/interface"
-import type { ToastInterface } from "./ts/interface"
-import { POSITION, TYPE, VT_NAMESPACE } from "./ts/constants"
-import { EventBusInterface, isEventBusInterface, EventBus } from "./ts/eventBus"
-import type { PluginOptions } from "./types"
-import * as ownExports from "./index"
 import "./scss/index.scss"
-import { isBrowser } from "./ts/utils"
+import { VueToastificationPlugin } from "./ts/composables/useToast"
 
-const createMockToastInterface = (): ToastInterface => {
-  const toast = () =>
-    console.warn(`[${VT_NAMESPACE}] This plugin does not support SSR!`)
-  return new Proxy(toast, {
-    get() {
-      return toast
-    },
-  }) as unknown as ToastInterface
-}
-
-function createToastInterface(eventBus: EventBusInterface): ToastInterface
-function createToastInterface(options?: PluginOptions): ToastInterface
-function createToastInterface(
-  optionsOrEventBus?: PluginOptions | EventBusInterface
-): ToastInterface {
-  if (!isBrowser()) {
-    return createMockToastInterface()
-  }
-  if (isEventBusInterface(optionsOrEventBus)) {
-    return buildInterface({ eventBus: optionsOrEventBus }, false)
-  }
-  return buildInterface(optionsOrEventBus, true)
-}
-
-const toastInjectionKey: InjectionKey<ToastInterface> =
-  Symbol("VueToastification")
-
-const globalEventBus = new EventBus()
+export {
+  createToastInstance,
+  provideToast,
+  useToast,
+} from "./ts/composables/useToast"
 
-const VueToastificationPlugin: Plugin = (App, options?: PluginOptions) => {
-  if (options?.shareAppContext === true) {
-    options.shareAppContext = App
-  }
-  const inter = ownExports.createToastInterface({
-    eventBus: globalEventBus,
-    ...options,
-  })
-  App.provide(toastInjectionKey, inter)
-}
+export { EventBus } from "./ts/eventBus"
 
-const provideToast = (options?: PluginOptions) => {
-  const toast = ownExports.createToastInterface(options)
-  if (getCurrentInstance()) {
-    provide(toastInjectionKey, toast)
-  }
-}
+export { POSITION, TYPE } from "./ts/constants"
 
-const useToast = (eventBus?: EventBus) => {
-  if (eventBus) {
-    return ownExports.createToastInterface(eventBus)
-  }
-  const toast = getCurrentInstance()
-    ? inject(toastInjectionKey, undefined)
-    : undefined
-  return toast ? toast : ownExports.createToastInterface(globalEventBus)
-}
+export type { PluginOptions } from "./types"
+export type { ToastInterface } from "./ts/interface"
 
 export default VueToastificationPlugin
-
-export {
-  // Types
-  ToastInterface,
-  PluginOptions,
-  // Consts
-  POSITION,
-  TYPE,
-  toastInjectionKey,
-  // Functions
-  createToastInterface,
-  useToast,
-  provideToast,
-  // Classes
-  EventBus,
-  // Instances
-  globalEventBus,
-}
diff --git a/src/ts/composables/useDraggable.ts b/src/ts/composables/useDraggable.ts
new file mode 100644
index 0000000..9f41cda
--- /dev/null
+++ b/src/ts/composables/useDraggable.ts
@@ -0,0 +1,111 @@
+import {
+  toRefs,
+  ref,
+  Ref,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+  watch,
+} from "vue"
+import { ToastOptions } from "../../types"
+import { isDOMRect, getX, getY } from "../utils"
+
+export const useDraggable = (
+  el: Ref<HTMLElement | null>,
+  props: Required<Pick<ToastOptions, "draggablePercent" | "draggable">>
+) => {
+  // Extract used props
+  const { draggablePercent, draggable } = toRefs(props)
+
+  // Define state
+  const dragRect = computed(() =>
+    el.value ? el.value.getBoundingClientRect() : undefined
+  )
+  const dragStarted = ref(false)
+  const beingDragged = ref(false)
+  const dragPos = ref({ x: 0, y: 0 })
+  const dragStart = ref(0)
+  const dragDelta = computed(() =>
+    beingDragged.value ? dragPos.value.x - dragStart.value : 0
+  )
+  const dragComplete = ref(false)
+
+  // Computed state
+  const removalDistance = computed(() =>
+    isDOMRect(dragRect.value)
+      ? (dragRect.value.right - dragRect.value.left) * draggablePercent.value
+      : 0
+  )
+
+  // Update style to match drag
+  watch(
+    [el, dragStart, dragPos, dragDelta, removalDistance, beingDragged],
+    () => {
+      if (el.value) {
+        el.value.style.transform = "translateX(0px)"
+        el.value.style.opacity = "1"
+        if (dragStart.value === dragPos.value.x) {
+          el.value.style.transition = ""
+        } else if (beingDragged.value) {
+          el.value.style.transform = `translateX(${dragDelta.value}px)`
+          el.value.style.opacity = `${
+            1 - Math.abs(dragDelta.value / removalDistance.value)
+          }`
+        } else {
+          el.value.style.transition = "transform 0.2s, opacity 0.2s"
+        }
+      }
+    }
+  )
+
+  // Define handlers
+  const onDragStart = (event: TouchEvent | MouseEvent) => {
+    dragStarted.value = true
+    dragPos.value = { x: getX(event), y: getY(event) }
+    dragStart.value = dragPos.value.x
+  }
+  const onDragMove = (event: TouchEvent | MouseEvent) => {
+    if (dragStarted.value) {
+      beingDragged.value = true
+      event.preventDefault()
+      dragPos.value = { x: getX(event), y: getY(event) }
+    }
+  }
+  const onDragEnd = () => {
+    dragStarted.value = false
+    if (beingDragged.value) {
+      if (Math.abs(dragDelta.value) >= removalDistance.value) {
+        dragComplete.value = true
+      } else {
+        setTimeout(() => {
+          beingDragged.value = false
+        })
+      }
+    }
+  }
+
+  onMounted(() => {
+    if (draggable.value && el.value) {
+      el.value.addEventListener("touchstart", onDragStart, {
+        passive: true,
+      })
+      el.value.addEventListener("mousedown", onDragStart)
+      addEventListener("touchmove", onDragMove, { passive: false })
+      addEventListener("mousemove", onDragMove)
+      addEventListener("touchend", onDragEnd)
+      addEventListener("mouseup", onDragEnd)
+    }
+  })
+  onBeforeUnmount(() => {
+    if (draggable.value && el.value) {
+      el.value.removeEventListener("touchstart", onDragStart)
+      el.value.removeEventListener("mousedown", onDragStart)
+      removeEventListener("touchmove", onDragMove)
+      removeEventListener("mousemove", onDragMove)
+      removeEventListener("touchend", onDragEnd)
+      removeEventListener("mouseup", onDragEnd)
+    }
+  })
+
+  return { dragComplete, beingDragged }
+}
diff --git a/src/ts/composables/useEventBus.ts b/src/ts/composables/useEventBus.ts
new file mode 100644
index 0000000..200e50d
--- /dev/null
+++ b/src/ts/composables/useEventBus.ts
@@ -0,0 +1,18 @@
+import { inject, InjectionKey, Plugin } from "vue"
+import { EventBus, EventBusInterface } from "../eventBus"
+import { VT_NAMESPACE } from "../constants"
+
+const eventBusKey: InjectionKey<EventBusInterface> = Symbol("Event Bus")
+
+export const globalEventBus = new EventBus()
+
+export const eventBusPlugin: Plugin = (app, eventBus?: EventBusInterface) =>
+  app.provide(eventBusKey, eventBus || new EventBus())
+
+export const useEventBus = () => {
+  const eventBus = inject(eventBusKey)
+  if (!eventBus) {
+    throw new Error(`[${VT_NAMESPACE}] useEventBus must be called from setup()`)
+  }
+  return eventBus
+}
diff --git a/src/ts/composables/useFocusable.ts b/src/ts/composables/useFocusable.ts
new file mode 100644
index 0000000..037efa2
--- /dev/null
+++ b/src/ts/composables/useFocusable.ts
@@ -0,0 +1,26 @@
+import { toRefs, ref, Ref, onMounted, onBeforeUnmount } from "vue"
+import { ToastOptions } from "../../types"
+
+export const useFocusable = (
+  el: Ref<HTMLElement | null>,
+  props: Required<Pick<ToastOptions, "pauseOnFocusLoss">>
+) => {
+  const { pauseOnFocusLoss } = toRefs(props)
+  const focused = ref(true)
+  const onFocus = () => (focused.value = true)
+  const onBlur = () => (focused.value = false)
+  onMounted(() => {
+    if (el.value && pauseOnFocusLoss.value) {
+      addEventListener("blur", onBlur)
+      addEventListener("focus", onFocus)
+    }
+  })
+  onBeforeUnmount(() => {
+    if (el.value && pauseOnFocusLoss.value) {
+      removeEventListener("blur", onBlur)
+      removeEventListener("focus", onFocus)
+    }
+  })
+
+  return { focused }
+}
diff --git a/src/ts/composables/useHoverable.ts b/src/ts/composables/useHoverable.ts
new file mode 100644
index 0000000..3ef5b68
--- /dev/null
+++ b/src/ts/composables/useHoverable.ts
@@ -0,0 +1,27 @@
+import { toRefs, ref, Ref, onMounted, onBeforeUnmount } from "vue"
+import { ToastOptions } from "../../types"
+
+export const useHoverable = (
+  el: Ref<HTMLElement | null>,
+  props: Required<Pick<ToastOptions, "pauseOnHover">>
+) => {
+  const { pauseOnHover } = toRefs(props)
+  const hovering = ref(false)
+
+  const onEnter = () => (hovering.value = true)
+  const onLeave = () => (hovering.value = false)
+  onMounted(() => {
+    if (el.value && pauseOnHover?.value) {
+      el.value.addEventListener("mouseenter", onEnter)
+      el.value.addEventListener("mouseleave", onLeave)
+    }
+  })
+  onBeforeUnmount(() => {
+    if (el.value && pauseOnHover?.value) {
+      el.value.removeEventListener("mouseenter", onEnter)
+      el.value.removeEventListener("mouseleave", onLeave)
+    }
+  })
+
+  return { hovering }
+}
diff --git a/src/ts/composables/useToast.ts b/src/ts/composables/useToast.ts
new file mode 100644
index 0000000..28ff0d9
--- /dev/null
+++ b/src/ts/composables/useToast.ts
@@ -0,0 +1,83 @@
+import { Plugin, InjectionKey, provide, inject, getCurrentInstance } from "vue"
+import { EventBusInterface, isEventBusInterface, EventBus } from "../eventBus"
+import { buildInterface } from "../interface"
+import { VT_NAMESPACE } from "../constants"
+import { isBrowser } from "../utils"
+import { globalEventBus } from "./useEventBus"
+import type { PluginOptions } from "../../types"
+import type { ToastInterface } from "../interface"
+import * as ownExports from "./useToast"
+
+const toastInjectionKey: InjectionKey<ToastInterface> =
+  Symbol("VueToastification")
+
+/**
+ * Creates (or recovers) a toast instance and returns
+ * an interface to it
+ */
+export interface CreateToastInstance {
+  /**
+   * Creates an interface to an existing instance from its interface
+   */
+  (eventBus: EventBusInterface): ToastInterface
+  /**
+   * Creats a new instance of Vue Toastification
+   */
+  (options?: PluginOptions): ToastInterface
+}
+
+const createMockToastInstance: CreateToastInstance = () => {
+  const toast = () =>
+    console.warn(`[${VT_NAMESPACE}] This plugin does not support SSR!`)
+  return new Proxy(toast, {
+    get() {
+      return toast
+    },
+  }) as unknown as ToastInterface
+}
+
+const createToastInstance: CreateToastInstance = optionsOrEventBus => {
+  if (!isBrowser()) {
+    return createMockToastInstance()
+  }
+  if (isEventBusInterface(optionsOrEventBus)) {
+    return buildInterface({ eventBus: optionsOrEventBus }, false)
+  }
+  return buildInterface(optionsOrEventBus, true)
+}
+
+const VueToastificationPlugin: Plugin = (App, options?: PluginOptions) => {
+  if (options?.shareAppContext === true) {
+    options.shareAppContext = App
+  }
+  const inter = ownExports.createToastInstance({
+    eventBus: globalEventBus,
+    ...options,
+  })
+  App.provide(toastInjectionKey, inter)
+}
+
+const provideToast = (options?: PluginOptions) => {
+  if (getCurrentInstance()) {
+    const toast = ownExports.createToastInstance(options)
+    provide(toastInjectionKey, toast)
+  }
+}
+
+const useToast = (eventBus?: EventBus) => {
+  if (eventBus) {
+    return ownExports.createToastInstance(eventBus)
+  }
+  const toast = getCurrentInstance()
+    ? inject(toastInjectionKey, undefined)
+    : undefined
+  return toast ? toast : ownExports.createToastInstance(globalEventBus)
+}
+
+export {
+  useToast,
+  provideToast,
+  toastInjectionKey,
+  createToastInstance,
+  VueToastificationPlugin,
+}
diff --git a/src/ts/interface.ts b/src/ts/interface.ts
index 004a7e5..244c616 100644
--- a/src/ts/interface.ts
+++ b/src/ts/interface.ts
@@ -1,5 +1,5 @@
 import { createApp, nextTick } from "vue"
-import { EventBus } from "./eventBus"
+import { EventBus, EventBusInterface } from "./eventBus"
 import ToastContainer from "../components/VtToastContainer.vue"
 import {
   ToastContent,
@@ -8,132 +8,154 @@ import {
   PluginOptions,
   ToastOptionsAndRequiredContent,
 } from "../types"
-import { TYPE, EVENTS, VT_NAMESPACE } from "./constants"
+import { TYPE, EVENTS } from "./constants"
 import { getId, isUndefined } from "./utils"
+import { eventBusPlugin } from "./composables/useEventBus"
 
-export const buildInterface = (
-  globalOptions: PluginOptions = {},
-  mountContainer = true
-) => {
-  const events = (globalOptions.eventBus =
-    globalOptions.eventBus || new EventBus())
-  if (mountContainer) {
-    nextTick(() => {
-      const app = createApp(ToastContainer, {
-        ...globalOptions,
-      })
-      const component = app.mount(document.createElement("div"))
-
-      const onMounted = globalOptions.onMounted
-      if (!isUndefined(onMounted)) {
-        onMounted(component, app)
-      }
-
-      if (globalOptions.shareAppContext) {
-        const baseApp = globalOptions.shareAppContext
-        if (baseApp === true) {
-          console.warn(
-            `[${VT_NAMESPACE}] App to share context with was not provided.`
-          )
-        } else {
-          app._context.components = baseApp._context.components
-          app._context.directives = baseApp._context.directives
-          app._context.mixins = baseApp._context.mixins
-          app._context.provides = baseApp._context.provides
-          app.config.globalProperties = baseApp.config.globalProperties
-        }
-      }
-    })
-  }
+/**
+ * Display a toast
+ */
+interface ToastMethod<T extends TYPE = TYPE> {
+  (content: ToastContent, options?: ToastOptions & { type?: T }): ToastID
+}
+
+interface DismissToast {
+  (toastID: ToastID): void
+}
+
+interface ClearToasts {
+  (): void
+}
+
+interface UpdateDefaults {
+  (update: PluginOptions): void
+}
+
+interface UpdateToast {
+  (
+    toastID: ToastID,
+    update: { content?: ToastContent; options?: ToastOptions },
+    create?: false
+  ): void
+  (
+    toastID: ToastID,
+    update: { content: ToastContent; options?: ToastOptions },
+    create: true
+  ): void
+}
+
+export interface ToastInterface extends ToastMethod {
   /**
-   * Display a toast
+   * Display a success toast
    */
-  const toast = (content: ToastContent, options?: ToastOptions): ToastID => {
-    const props: ToastOptionsAndRequiredContent & {
-      id: ToastID
-    } = Object.assign({}, { id: getId(), type: TYPE.DEFAULT }, options, {
-      content,
-    })
-    events.emit(EVENTS.ADD, props)
-    return props.id
-  }
+  success: ToastMethod<TYPE.SUCCESS>
   /**
-   * Clear all toasts
+   * Display an info toast
    */
-  toast.clear = () => events.emit(EVENTS.CLEAR, undefined)
+  info: ToastMethod<TYPE.INFO>
   /**
-   * Update Plugin Defaults
+   * Display a warning toast
    */
-  toast.updateDefaults = (update: PluginOptions) => {
-    events.emit(EVENTS.UPDATE_DEFAULTS, update)
-  }
+  warning: ToastMethod<TYPE.WARNING>
+  /**
+   * Display an error toast
+   */
+  error: ToastMethod<TYPE.ERROR>
   /**
    * Dismiss toast specified by an id
    */
-  toast.dismiss = (id: ToastID) => {
-    events.emit(EVENTS.DISMISS, id)
-  }
+  dismiss: DismissToast
   /**
    * Update Toast
    */
-  function updateToast(
-    id: ToastID,
-    { content, options }: { content?: ToastContent; options?: ToastOptions },
-    create?: false
-  ): void
-  function updateToast(
-    id: ToastID,
-    { content, options }: { content: ToastContent; options?: ToastOptions },
-    create?: true
-  ): void
-  function updateToast(
-    id: ToastID,
-    { content, options }: { content?: ToastContent; options?: ToastOptions },
-    create = false
-  ): void {
-    const opt = Object.assign({}, options, { content }) as ToastOptions & {
-      content: ToastContent
-    }
-    events.emit(EVENTS.UPDATE, {
-      id,
-      options: opt,
-      create,
-    })
-  }
-  toast.update = updateToast
+  update: UpdateToast
   /**
-   * Display a success toast
+   * Clear all toasts
    */
-  toast.success = (
-    content: ToastContent,
-    options?: ToastOptions & { type?: TYPE.SUCCESS }
-  ) => toast(content, Object.assign({}, options, { type: TYPE.SUCCESS }))
-
+  clear: ClearToasts
   /**
-   * Display an info toast
+   * Update Plugin Defaults
    */
-  toast.info = (
-    content: ToastContent,
-    options?: ToastOptions & { type?: TYPE.INFO }
-  ) => toast(content, Object.assign({}, options, { type: TYPE.INFO }))
+  updateDefaults: UpdateDefaults
+}
 
-  /**
-   * Display an error toast
-   */
-  toast.error = (
-    content: ToastContent,
-    options?: ToastOptions & { type?: TYPE.ERROR }
-  ) => toast(content, Object.assign({}, options, { type: TYPE.ERROR }))
+/**
+ * Creates and mounts the plugin app
+ * @param options Plugin options passed during init
+ */
+function mountPlugin(options: PluginOptions) {
+  const { shareAppContext, eventBus, onMounted, ...containerOptions } = options
 
-  /**
-   * Display a warning toast
-   */
-  toast.warning = (
-    content: ToastContent,
-    options?: ToastOptions & { type?: TYPE.WARNING }
-  ) => toast(content, Object.assign({}, options, { type: TYPE.WARNING }))
+  const app = createApp(ToastContainer, {
+    ...containerOptions,
+  })
+
+  if (shareAppContext && shareAppContext !== true) {
+    const userApp = shareAppContext
+    app._context.components = userApp._context.components
+    app._context.directives = userApp._context.directives
+    app._context.mixins = userApp._context.mixins
+    app._context.provides = userApp._context.provides
+    app.config.globalProperties = userApp.config.globalProperties
+  }
+
+  app.use(eventBusPlugin, eventBus)
+
+  const component = app.mount(document.createElement("div"))
+
+  if (!isUndefined(onMounted)) {
+    onMounted(component, app)
+  }
+}
+
+const createInterface = (events: EventBusInterface): ToastInterface => {
+  const createToastMethod = <T extends TYPE = TYPE>(
+    type: T
+  ): ToastMethod<T> => {
+    const method: ToastMethod<T> = (content, options) => {
+      const props: ToastOptionsAndRequiredContent & {
+        id: ToastID
+      } = Object.assign({ id: getId(), type, content }, options)
+      events.emit(EVENTS.ADD, props)
+      return props.id
+    }
+    return method
+  }
+
+  const dismiss: DismissToast = toastID => events.emit(EVENTS.DISMISS, toastID)
+  const clear: ClearToasts = () => events.emit(EVENTS.CLEAR, undefined)
+  const updateDefaults: UpdateDefaults = update =>
+    events.emit(EVENTS.UPDATE_DEFAULTS, update)
+  const update: UpdateToast = (toastID, update, create) => {
+    const { content, options } = update
+    events.emit(EVENTS.UPDATE, {
+      id: toastID,
+      create: create || false,
+      options: { ...options, content: content as ToastContent },
+    })
+  }
 
-  return toast
+  return Object.assign(createToastMethod<TYPE>(TYPE.DEFAULT), {
+    success: createToastMethod(TYPE.SUCCESS),
+    info: createToastMethod(TYPE.INFO),
+    warning: createToastMethod(TYPE.WARNING),
+    error: createToastMethod(TYPE.ERROR),
+    dismiss,
+    clear,
+    update,
+    updateDefaults,
+  })
 }
 
-export type ToastInterface = ReturnType<typeof buildInterface>
+export const buildInterface = (
+  globalOptions: PluginOptions = {},
+  mountContainer = true
+): ToastInterface => {
+  const events = (globalOptions.eventBus =
+    globalOptions.eventBus || new EventBus())
+
+  if (mountContainer) {
+    nextTick(() => mountPlugin(globalOptions))
+  }
+  return createInterface(events)
+}
diff --git a/src/ts/propValidators.ts b/src/ts/propValidators.ts
index e8ee71e..4931b87 100644
--- a/src/ts/propValidators.ts
+++ b/src/ts/propValidators.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import type { PropType, ComponentObjectPropsOptions } from "vue"
-import { EventBus } from "./eventBus"
 import type {
   ToastContent,
   CommonOptions,
@@ -8,6 +7,7 @@ import type {
   ToastID,
   ToastOptions,
   ToastOptionsAndRequiredContent,
+  ContainerOptions,
 } from "../types"
 import { TYPE, POSITION, VT_NAMESPACE } from "./constants"
 
@@ -111,11 +111,6 @@ const CORE_TOAST = {
     type: Boolean as PropType<boolean>,
     default: false,
   },
-  eventBus: {
-    type: Object as PropType<NonNullable<PluginOptions["eventBus"]>>,
-    required: false,
-    default: () => new EventBus(),
-  },
 }
 
 const TOAST = {
@@ -140,10 +135,10 @@ const TOAST = {
   },
 }
 
-export type PluginOptionsType = Required<
-  Omit<PluginOptions, keyof CommonOptionsType>
+export type ContainerOptionsType = Required<
+  Omit<ContainerOptions, keyof CommonOptionsType>
 >
-const CONTAINER: ComponentObjectPropsOptions<PluginOptionsType> = {
+const CONTAINER: ComponentObjectPropsOptions<ContainerOptionsType> = {
   container: {
     type: [
       Object as unknown as PluginOptions["container"],
@@ -171,10 +166,6 @@ const CONTAINER: ComponentObjectPropsOptions<PluginOptionsType> = {
     default: (toasts: ToastOptionsAndRequiredContent[]) => toasts,
   },
   containerClassName: COMMON.classNames,
-  onMounted: Function as PropType<NonNullable<PluginOptions["onMounted"]>>,
-  shareAppContext: [Boolean, Object] as PropType<
-    NonNullable<PluginOptions["shareAppContext"]>
-  >,
 }
 
 export default {
diff --git a/src/ts/utils.ts b/src/ts/utils.ts
index cbda11c..947e636 100644
--- a/src/ts/utils.ts
+++ b/src/ts/utils.ts
@@ -60,6 +60,15 @@ const hasProp = <O, K extends PropertyKey>(
 ): obj is O & { [key in K]: unknown } =>
   (isObject(obj) || isFunction(obj)) && propKey in obj
 
+const getProp = <O, K extends PropertyKey, D>(
+  obj: O,
+  propKey: K,
+  fallback: D
+): K extends keyof O ? O[K] : D =>
+  (hasProp(obj, propKey) ? obj[propKey] : fallback) as K extends keyof O
+    ? O[K]
+    : D
+
 /**
  * ID generator
  */
@@ -129,4 +138,5 @@ export {
   isDOMRect,
   isFunction,
   isBrowser,
+  getProp,
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index b6b5a0a..2b6a261 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -111,7 +111,7 @@ export interface CommonOptions {
 
 type ContainerCallback = () => HTMLElement | Promise<HTMLElement>
 
-export interface PluginOptions extends CommonOptions {
+export interface ContainerOptions extends CommonOptions {
   /**
    * Container where the toasts are mounted.
    */
@@ -159,6 +159,9 @@ export interface PluginOptions extends CommonOptions {
    * Keep in mind that there is one container for each possible toast position.
    */
   containerClassName?: string | string[]
+}
+
+export interface PluginOptions extends ContainerOptions {
   /**
    * Callback executed when the toast container is mounted.
    *