@bildvitta/quasar-ui-asteroid 3.15.0-beta.0 → 3.15.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.15.0-beta.0",
+  "version": "3.15.0-beta.1",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/grabbable/QasGrabbable.vue

@@ -28,6 +28,7 @@ const grabContainer = ref(null)
 const grabPosition = ref(null)
 const isGrabbing = ref(false)
 const scrollOnGrab = ref({})
+const resizeObserver = ref(null)
 
 const classes = computed(() => {
   const baseClass = 'qas-grabbable__container'
@@ -54,7 +55,7 @@ function handleEnableScrollOnGrab () {
     return
   }
 
-  disableScrollOnGrab()
+  destroyScrollOnGrab()
 }
 
 function initScrollOnGrab () {
@@ -67,7 +68,7 @@ function initScrollOnGrab () {
   })
 }
 
-function disableScrollOnGrab () {
+function destroyScrollOnGrab () {
   if (!hasScrollOnGrab.value) return
 
   scrollOnGrab.value.destroyEvents()
@@ -109,16 +110,23 @@ function setGrabPosition () {
   }
 }
 
-onMounted(() => {
-  handleEnableScrollOnGrab()
+function setResizeObserver () {
+  resizeObserver.value = new ResizeObserver(handleEnableScrollOnGrab)
+
+  resizeObserver.value.observe(grabContainer.value)
+}
 
-  window.addEventListener('resize', handleEnableScrollOnGrab)
+function destroyResizeObserver () {
+  resizeObserver.value.unobserve(grabContainer.value)
+}
+
+onMounted(() => {
+  setResizeObserver()
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleEnableScrollOnGrab)
-
-  disableScrollOnGrab()
+  destroyResizeObserver()
+  destroyScrollOnGrab()
 })
 </script>
 
@@ -156,6 +164,7 @@ onBeforeUnmount(() => {
       position: absolute;
       top: 0;
       pointer-events: none;
+      z-index: 1;
     }
 
     &::before {

package/src/helpers/set-scroll-on-grab.js

@@ -11,17 +11,18 @@
 * @returns {{ element: HTMLElement, destroyEvents: function }}
 */
 export default function (element, options = {}) {
-  setModel()
-
   let isDown = false
   let startX
   let scrollLeft
+  let isGrabbing = false
+
+  onGrab()
 
   const events = {
     mousedown: onMouseEnter,
-    mouseleave: onLeave,
+    mouseleave: onMouseLeave,
     mousemove: onMouseMove,
-    mouseup: onLeave,
+    mouseup: onMouseLeave,
     scroll: onScroll,
     touchend: onLeave,
     touchmove: onTouchMove,
@@ -53,10 +54,16 @@ export default function (element, options = {}) {
 
   function onLeave () {
     isDown = false
+    isGrabbing = false
 
     element.classList.remove('active')
 
-    setModel()
+    onGrab()
+  }
+
+  function onMouseLeave () {
+    onLeave()
+    blockEvents()
   }
 
   function onMouseMove (event) {
@@ -64,7 +71,10 @@ export default function (element, options = {}) {
 
     if (!isDown) return
 
-    setModel('grabbing')
+    isGrabbing = true
+
+    onGrab()
+    blockEvents()
 
     const x = event.pageX - element.offsetLeft
     const walk = (x - startX) * 3 // scroll-fast
@@ -79,7 +89,9 @@ export default function (element, options = {}) {
 
     if (!isDown) return
 
-    setModel('grabbing')
+    isGrabbing = true
+
+    onGrab()
 
     options.onMoveFn?.({ element, event })
   }
@@ -88,17 +100,13 @@ export default function (element, options = {}) {
     options.onScrollFn?.({ element, event })
   }
 
-  function setModel (model = 'grab') {
-    const isGrabbing = model === 'grabbing'
-
-    setStyles({ model, isGrabbing })
+  function onGrab () {
+    element.style.cursor = isGrabbing ? 'grabbing' : 'grab'
 
     options.onGrabFn?.({ element, isGrabbing })
   }
 
-  function setStyles ({ model, isGrabbing }) {
-    element.style.cursor = model
-
+  function blockEvents () {
     Array.from(element.children).forEach(child => {
       child.classList.toggle('no-pointer-events', isGrabbing)
       child.classList.toggle('non-selectable', isGrabbing)