Use toast composable

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")
     },
   },
 })

src/components/VtToast.vue

@@ -1,20 +1,14 @@
 <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>
       <component
         :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>