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

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.2",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/app-user/QasAppUser.vue

@@ -37,7 +37,7 @@
             </q-item-section>
 
             <q-item-section>
-              Editar
+              Perfil
             </q-item-section>
           </q-item>
 

package/src/components/grabbable/QasGrabbable.vue

@@ -2,7 +2,7 @@
   <div class="qas-grabbable relative-position">
     <div
       ref="grabContainer"
-      class="flex no-wrap qas-grabbable__container"
+      class="flex no-wrap qas-grabbable__container secondary-scroll"
       :class="classes"
     >
       <slot />
@@ -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)
+}
+
+function destroyResizeObserver () {
+  resizeObserver.value.unobserve(grabContainer.value)
+}
 
-  window.addEventListener('resize', handleEnableScrollOnGrab)
+onMounted(() => {
+  setResizeObserver()
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleEnableScrollOnGrab)
-
-  disableScrollOnGrab()
+  destroyResizeObserver()
+  destroyScrollOnGrab()
 })
 </script>
 
@@ -128,25 +136,6 @@ onBeforeUnmount(() => {
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
     overflow-x: auto;
-    scrollbar-color: $blue-grey-3 transparent;
-
-    &::-webkit-scrollbar {
-      height: 12px;
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: $blue-grey-3;
-      border-radius: var(--qas-generic-border-radius);
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: $blue-grey-4;
-    }
 
     &::before,
     &::after {
@@ -156,6 +145,7 @@ onBeforeUnmount(() => {
       position: absolute;
       top: 0;
       pointer-events: none;
+      z-index: 1;
     }
 
     &::before {

package/src/css/utils/index.scss

@@ -5,5 +5,6 @@
 @import './fonts';
 @import './line-height';
 @import './opacity';
+@import './scroll';
 @import './text';
 @import './unset';

package/src/css/utils/scroll.scss

@@ -0,0 +1,21 @@
+.secondary-scroll {
+  scrollbar-color: $blue-grey-3 transparent;
+
+  &::-webkit-scrollbar {
+    height: 12px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $blue-grey-3;
+    border-radius: var(--qas-generic-border-radius);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $blue-grey-4;
+  }
+}

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)