quasar 2.18.7 → 2.19.0

package/src/components/page-scroller/QPageScroller.js

@@ -1,7 +1,20 @@
-import { h, ref, computed, watch, onBeforeUnmount, getCurrentInstance, Transition } from 'vue'
-
-import usePageSticky, { usePageStickyProps } from '../page-sticky/use-page-sticky.js'
-import { getScrollTarget, setVerticalScrollPosition } from '../../utils/scroll/scroll.js'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onBeforeUnmount,
+  getCurrentInstance,
+  Transition
+} from 'vue'
+
+import usePageSticky, {
+  usePageStickyProps
+} from '../page-sticky/use-page-sticky.js'
+import {
+  getScrollTarget,
+  setVerticalScrollPosition
+} from '../../utils/scroll/scroll.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
@@ -25,47 +38,51 @@ export default createComponent({
 
     offset: {
       ...usePageStickyProps.offset,
-      default: () => [ 18, 18 ]
+      default: () => [18, 18]
     }
   },
 
-  emits: [ 'click' ],
+  emits: ['click'],
 
-  setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots, emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
     const { $layout, getStickyContent } = usePageSticky()
     const rootRef = ref(null)
 
     let heightWatcher
 
-    const scrollHeight = computed(() => $layout.height.value - (
-      $layout.isContainer.value === true
-        ? $layout.containerHeight.value
-        : $q.screen.height
-    ))
+    const scrollHeight = computed(
+      () =>
+        $layout.height.value -
+        ($layout.isContainer.value === true
+          ? $layout.containerHeight.value
+          : $q.screen.height)
+    )
 
-    function isVisible () {
+    function isVisible() {
       return props.reverse === true
-        ? scrollHeight.value - $layout.scroll.value.position > props.scrollOffset
+        ? scrollHeight.value - $layout.scroll.value.position >
+            props.scrollOffset
         : $layout.scroll.value.position > props.scrollOffset
     }
 
     const showing = ref(isVisible())
 
-    function updateVisibility () {
+    function updateVisibility() {
       const newVal = isVisible()
       if (showing.value !== newVal) {
         showing.value = newVal
       }
     }
 
-    function updateReverse () {
+    function updateReverse() {
       if (props.reverse === true) {
         if (heightWatcher === void 0) {
           heightWatcher = watch(scrollHeight, updateVisibility)
         }
-      }
-      else {
+      } else {
         cleanup()
       }
     }
@@ -73,14 +90,14 @@ export default createComponent({
     watch($layout.scroll, updateVisibility)
     watch(() => props.reverse, updateReverse)
 
-    function cleanup () {
+    function cleanup() {
       if (heightWatcher !== void 0) {
         heightWatcher()
         heightWatcher = void 0
       }
     }
 
-    function onClick (e) {
+    function onClick(e) {
       const target = getScrollTarget(
         $layout.isContainer.value === true
           ? rootRef.value
@@ -96,13 +113,17 @@ export default createComponent({
       emit('click', e)
     }
 
-    function getContent () {
+    function getContent() {
       return showing.value === true
-        ? h('div', {
-          ref: rootRef,
-          class: 'q-page-scroller',
-          onClick
-        }, getStickyContent(slots))
+        ? h(
+            'div',
+            {
+              ref: rootRef,
+              class: 'q-page-scroller',
+              onClick
+            },
+            getStickyContent(slots)
+          )
         : null
     }
 
@@ -110,10 +131,6 @@ export default createComponent({
 
     onBeforeUnmount(cleanup)
 
-    return () => h(
-      Transition,
-      { name: 'q-transition--fade' },
-      getContent
-    )
+    return () => h(Transition, { name: 'q-transition--fade' }, getContent)
   }
 })

package/src/components/page-scroller/QPageScroller.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/page-sticky/QPageSticky" ],
+  "mixins": ["components/page-sticky/QPageSticky"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/layout/page-scroller"
@@ -27,7 +27,7 @@
     },
 
     "offset": {
-      "default": "[ 18, 18 ]",
+      "default": "[18, 18]",
       "category": "content"
     }
   },

package/src/components/page-scroller/index.js

@@ -1,5 +1,3 @@
 import QPageScroller from './QPageScroller.js'
 
-export {
-  QPageScroller
-}
+export { QPageScroller }

package/src/components/page-sticky/QPageSticky.js

@@ -6,7 +6,7 @@ export default createComponent({
 
   props: usePageStickyProps,
 
-  setup (_, { slots }) {
+  setup(_, { slots }) {
     const { getStickyContent } = usePageSticky()
     return () => getStickyContent(slots)
   }

package/src/components/page-sticky/QPageSticky.json

@@ -9,9 +9,14 @@
       "desc": "Page side/corner to stick to",
       "default": "'bottom-right'",
       "values": [
-        "'top-right'", "'top-left'",
-        "'bottom-right'", "'bottom-left'",
-        "'top'", "'right'", "'bottom'", "'left'"
+        "'top-right'",
+        "'top-left'",
+        "'bottom-right'",
+        "'bottom-left'",
+        "'top'",
+        "'right'",
+        "'bottom'",
+        "'left'"
       ],
       "category": "position"
     },
@@ -19,7 +24,7 @@
     "offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the component horizontally and vertically in pixels",
-      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
+      "examples": ["[8, 8]", "[5, 10]"],
       "category": "position"
     },
 

package/src/components/page-sticky/index.js

@@ -1,5 +1,3 @@
 import QPageSticky from './QPageSticky.js'
 
-export {
-  QPageSticky
-}
+export { QPageSticky }

package/src/components/page-sticky/use-page-sticky.js

@@ -1,17 +1,26 @@
 import { h, computed, inject, getCurrentInstance } from 'vue'
 
 import { hSlot } from '../../utils/private.render/render.js'
-import { layoutKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
+import {
+  layoutKey,
+  emptyRenderFn
+} from '../../utils/private.symbols/symbols.js'
 
 export const usePageStickyProps = {
   position: {
     type: String,
     default: 'bottom-right',
-    validator: v => [
-      'top-right', 'top-left',
-      'bottom-right', 'bottom-left',
-      'top', 'right', 'bottom', 'left'
-    ].includes(v)
+    validator: v =>
+      [
+        'top-right',
+        'top-left',
+        'bottom-right',
+        'bottom-left',
+        'top',
+        'right',
+        'bottom',
+        'left'
+      ].includes(v)
   },
   offset: {
     type: Array,
@@ -20,8 +29,11 @@ export const usePageStickyProps = {
   expand: Boolean
 }
 
-export default function () {
-  const { props, proxy: { $q } } = getCurrentInstance()
+export default function usePageSticky() {
+  const {
+    props,
+    proxy: { $q }
+  } = getCurrentInstance()
 
   const $layout = inject(layoutKey, emptyRenderFn)
   if ($layout === emptyRenderFn) {
@@ -48,66 +60,65 @@ export default function () {
   const left = computed(() => $layout.left.offset)
 
   const style = computed(() => {
-    let posX = 0, posY = 0
+    let posX = 0,
+      posY = 0
 
     const side = attach.value
     const dir = $q.lang.rtl === true ? -1 : 1
 
     if (side.top === true && top.value !== 0) {
-      posY = `${ top.value }px`
-    }
-    else if (side.bottom === true && bottom.value !== 0) {
-      posY = `${ -bottom.value }px`
+      posY = `${top.value}px`
+    } else if (side.bottom === true && bottom.value !== 0) {
+      posY = `${-bottom.value}px`
     }
 
     if (side.left === true && left.value !== 0) {
-      posX = `${ dir * left.value }px`
-    }
-    else if (side.right === true && right.value !== 0) {
-      posX = `${ -dir * right.value }px`
+      posX = `${dir * left.value}px`
+    } else if (side.right === true && right.value !== 0) {
+      posX = `${-dir * right.value}px`
     }
 
-    const css = { transform: `translate(${ posX }, ${ posY })` }
+    const css = { transform: `translate(${posX}, ${posY})` }
 
     if (props.offset) {
-      css.margin = `${ props.offset[ 1 ] }px ${ props.offset[ 0 ] }px`
+      css.margin = `${props.offset[1]}px ${props.offset[0]}px`
     }
 
     if (side.vertical === true) {
       if (left.value !== 0) {
-        css[ $q.lang.rtl === true ? 'right' : 'left' ] = `${ left.value }px`
+        css[$q.lang.rtl === true ? 'right' : 'left'] = `${left.value}px`
       }
       if (right.value !== 0) {
-        css[ $q.lang.rtl === true ? 'left' : 'right' ] = `${ right.value }px`
+        css[$q.lang.rtl === true ? 'left' : 'right'] = `${right.value}px`
       }
-    }
-    else if (side.horizontal === true) {
+    } else if (side.horizontal === true) {
       if (top.value !== 0) {
-        css.top = `${ top.value }px`
+        css.top = `${top.value}px`
       }
       if (bottom.value !== 0) {
-        css.bottom = `${ bottom.value }px`
+        css.bottom = `${bottom.value}px`
       }
     }
 
     return css
   })
 
-  const classes = computed(() =>
-    `q-page-sticky row flex-center fixed-${ props.position }`
-    + ` q-page-sticky--${ props.expand === true ? 'expand' : 'shrink' }`
+  const classes = computed(
+    () =>
+      `q-page-sticky row flex-center fixed-${props.position}` +
+      ` q-page-sticky--${props.expand === true ? 'expand' : 'shrink'}`
   )
 
-  function getStickyContent (slots) {
+  function getStickyContent(slots) {
     const content = hSlot(slots.default)
 
-    return h('div', {
-      class: classes.value,
-      style: style.value
-    },
-    props.expand === true
-      ? content
-      : [ h('div', content) ]
+    return h(
+      'div',
+      {
+        class: classes.value,
+        style: style.value
+      },
+      props.expand === true ? content : [h('div', content)]
     )
   }