quasar 2.18.7 → 2.19.1

package/src/components/virtual-scroll/use-virtual-scroll.json

@@ -7,50 +7,50 @@
     },
 
     "virtual-scroll-slice-size": {
-      "type": [ "Number", "String", "null" ],
+      "type": ["Number", "String", "null"],
       "desc": "Minimum number of items to render in the virtual list",
       "default": "10",
-      "examples": [ "60", "'60'" ],
+      "examples": ["60", "'60'"],
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-slice-ratio-before": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Ratio of number of items in visible zone to render before it",
       "default": "1",
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-slice-ratio-after": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Ratio of number of items in visible zone to render after it",
       "default": "1",
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-item-size": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item",
       "default": "24",
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-sticky-size-start": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision",
       "default": "0",
       "category": "virtual-scroll"
     },
 
     "virtual-scroll-sticky-size-end": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision",
       "default": "0",
       "category": "virtual-scroll"
     },
 
     "table-colspan": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "The number of columns in the table (you need this if you use table-layout: fixed)",
       "category": "virtual-scroll|content"
     }
@@ -83,7 +83,7 @@
               "type": "String",
               "required": true,
               "desc": "Direction of change",
-              "values": [ "'increase'", "'decrease'" ]
+              "values": ["'increase'", "'decrease'"]
             },
             "ref": {
               "type": "Component",
@@ -101,14 +101,21 @@
       "desc": "Scroll the virtual scroll list to the item with the specified index (0 based)",
       "params": {
         "index": {
-          "type": [ "Number", "String" ],
+          "type": ["Number", "String"],
           "desc": "The index of the list item (0 based)",
           "required": true
         },
         "edge": {
           "type": "String",
           "desc": "The edge to align to if the item is not visible already (by default it aligns to end if scrolling towards the end and to start otherwise); If the '-force' version is used then it always aligns",
-          "values": [ "'start'", "'center'", "'end'", "'start-force'", "'center-force'", "'end-force'" ]
+          "values": [
+            "'start'",
+            "'center'",
+            "'end'",
+            "'start-force'",
+            "'center-force'",
+            "'end-force'"
+          ]
         }
       },
       "returns": null
@@ -124,9 +131,9 @@
       "desc": "Refreshes the virtual scroll list; Use it after appending items",
       "params": {
         "index": {
-          "type": [ "String", "Number" ],
+          "type": ["String", "Number"],
           "desc": "The index of the list item to scroll to after refresh (0 based); If it's not specified the scroll position is not changed; Use a negative value to keep scroll position",
-          "examples": [ "5" ]
+          "examples": ["5"]
         }
       },
       "returns": null

package/src/composables/private.use-align/use-align.js

@@ -19,13 +19,16 @@ export const useAlignProps = {
   }
 }
 
-export default function (props) {
+export default function useAlign(props) {
   // return alignClass
   return computed(() => {
-    const align = props.align === void 0
-      ? props.vertical === true ? 'stretch' : 'left'
-      : props.align
+    const align =
+      props.align === void 0
+        ? props.vertical === true
+          ? 'stretch'
+          : 'left'
+        : props.align
 
-    return `${ props.vertical === true ? 'items' : 'justify' }-${ alignMap[ align ] }`
+    return `${props.vertical === true ? 'items' : 'justify'}-${alignMap[align]}`
   })
 }

package/src/composables/private.use-align/use-align.test.js

@@ -29,33 +29,25 @@ describe('[useAlign API]', () => {
   describe('[Functions]', () => {
     describe('[(function)default]', () => {
       test('returns correctly', () => {
-        expect(
-          useAlign({})
-        ).$ref()
+        expect(useAlign({})).$ref()
       })
 
       test('horizontal', () => {
-        expect(
-          useAlign({}).value
-        ).toMatch(/^justify-/)
+        expect(useAlign({}).value).toMatch(/^justify-/)
       })
 
       test('vertical', () => {
-        expect(
-          useAlign({ vertical: true }).value
-        ).toMatch(/^items-/)
+        expect(useAlign({ vertical: true }).value).toMatch(/^items-/)
       })
 
       test.each([
-        [ 'empty', {}, 'justify-start' ],
-        [ 'vertical', { vertical: true }, 'items-stretch' ],
-        [ 'align right', { align: 'right' }, 'justify-end' ],
-        [ 'align evenly', { align: 'evenly' }, 'justify-evenly' ],
-        [ 'vertical right', { vertical: true, align: 'right' }, 'items-end' ]
+        ['empty', {}, 'justify-start'],
+        ['vertical', { vertical: true }, 'items-stretch'],
+        ['align right', { align: 'right' }, 'justify-end'],
+        ['align evenly', { align: 'evenly' }, 'justify-evenly'],
+        ['vertical right', { vertical: true, align: 'right' }, 'items-end']
       ])('useAlign: %s', (_, arg, expected) => {
-        expect(
-          useAlign(arg)
-        ).$ref(expected)
+        expect(useAlign(arg)).$ref(expected)
       })
     })
   })

package/src/composables/private.use-anchor/use-anchor-static.json

@@ -1,15 +1,10 @@
 {
   "props": {
     "target": {
-      "type": [ "Boolean", "String", "Element" ],
+      "type": ["Boolean", "String", "Element"],
       "desc": "Configure a target element to trigger component toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)",
       "default": "true",
-      "examples": [
-        "false",
-        ".my-parent",
-        "#target-id",
-        "$refs.target"
-      ],
+      "examples": ["false", ".my-parent", "#target-id", "$refs.target"],
       "category": "behavior"
     },
 

package/src/composables/private.use-anchor/use-anchor.js

@@ -1,4 +1,11 @@
-import { ref, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import {
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  getCurrentInstance
+} from 'vue'
 
 import { clearSelection } from '../../utils/private.selection/selection.js'
 import { addEvt, cleanEvt, prevent } from '../../utils/event/event.js'
@@ -9,7 +16,7 @@ export const useAnchorStaticProps = {
   target: __QUASAR_SSR_SERVER__
     ? { default: true }
     : {
-        type: [ Boolean, String, Element ],
+        type: [Boolean, String, Element],
         default: true
       },
 
@@ -21,7 +28,7 @@ export const useAnchorProps = {
   contextMenu: Boolean
 }
 
-export default function ({
+export default function useAnchor({
   showing,
   avoidEmit, // required for QPopupProxy (true)
   configureAnchorEl // optional
@@ -32,11 +39,11 @@ export default function ({
 
   let touchTimer = null
 
-  function canShow (evt) {
+  function canShow(evt) {
     // abort with no parent configured or on multi-touch
     return anchorEl.value === null
       ? false
-      : (evt === void 0 || evt.touches === void 0 || evt.touches.length <= 1)
+      : evt === void 0 || evt.touches === void 0 || evt.touches.length <= 1
   }
 
   const anchorEvents = {}
@@ -46,20 +53,20 @@ export default function ({
     // QMenu & QPopupProxy (which is why it's handled here)
 
     Object.assign(anchorEvents, {
-      hide (evt) {
+      hide(evt) {
         proxy.hide(evt)
       },
 
-      toggle (evt) {
+      toggle(evt) {
         proxy.toggle(evt)
         evt.qAnchorHandled = true
       },
 
-      toggleKey (evt) {
-        isKeyCode(evt, 13) === true && anchorEvents.toggle(evt)
+      toggleKey(evt) {
+        if (isKeyCode(evt, 13) === true) anchorEvents.toggle(evt)
       },
 
-      contextClick (evt) {
+      contextClick(evt) {
         proxy.hide(evt)
         prevent(evt)
         nextTick(() => {
@@ -70,7 +77,7 @@ export default function ({
 
       prevent,
 
-      mobileTouch (evt) {
+      mobileTouch(evt) {
         anchorEvents.mobileCleanup(evt)
 
         if (canShow(evt) !== true) return
@@ -80,10 +87,10 @@ export default function ({
 
         const target = evt.target
         addEvt(anchorEvents, 'anchor', [
-          [ target, 'touchmove', 'mobileCleanup', 'passive' ],
-          [ target, 'touchend', 'mobileCleanup', 'passive' ],
-          [ target, 'touchcancel', 'mobileCleanup', 'passive' ],
-          [ anchorEl.value, 'contextmenu', 'prevent', 'notPassive' ]
+          [target, 'touchmove', 'mobileCleanup', 'passive'],
+          [target, 'touchend', 'mobileCleanup', 'passive'],
+          [target, 'touchcancel', 'mobileCleanup', 'passive'],
+          [anchorEl.value, 'contextmenu', 'prevent', 'notPassive']
         ])
 
         touchTimer = setTimeout(() => {
@@ -93,7 +100,7 @@ export default function ({
         }, 300)
       },
 
-      mobileCleanup (evt) {
+      mobileCleanup(evt) {
         anchorEl.value.classList.remove('non-selectable')
 
         if (touchTimer !== null) {
@@ -107,28 +114,26 @@ export default function ({
       }
     })
 
-    configureAnchorEl = function (context = props.contextMenu) {
+    configureAnchorEl = function configureAnchorElFn(
+      context = props.contextMenu
+    ) {
       if (props.noParentEvent === true || anchorEl.value === null) return
 
       let evts
 
       if (context === true) {
         if (proxy.$q.platform.is.mobile === true) {
+          evts = [[anchorEl.value, 'touchstart', 'mobileTouch', 'passive']]
+        } else {
           evts = [
-            [ anchorEl.value, 'touchstart', 'mobileTouch', 'passive' ]
+            [anchorEl.value, 'mousedown', 'hide', 'passive'],
+            [anchorEl.value, 'contextmenu', 'contextClick', 'notPassive']
           ]
         }
-        else {
-          evts = [
-            [ anchorEl.value, 'mousedown', 'hide', 'passive' ],
-            [ anchorEl.value, 'contextmenu', 'contextClick', 'notPassive' ]
-          ]
-        }
-      }
-      else {
+      } else {
         evts = [
-          [ anchorEl.value, 'click', 'toggle', 'passive' ],
-          [ anchorEl.value, 'keyup', 'toggleKey', 'passive' ]
+          [anchorEl.value, 'click', 'toggle', 'passive'],
+          [anchorEl.value, 'keyup', 'toggleKey', 'passive']
         ]
       }
 
@@ -136,11 +141,11 @@ export default function ({
     }
   }
 
-  function unconfigureAnchorEl () {
+  function unconfigureAnchorEl() {
     cleanEvt(anchorEvents, 'anchor')
   }
 
-  function setAnchorEl (el) {
+  function setAnchorEl(el) {
     anchorEl.value = el
     while (anchorEl.value.classList.contains('q-anchor--skip')) {
       anchorEl.value = anchorEl.value.parentNode
@@ -148,21 +153,22 @@ export default function ({
     configureAnchorEl()
   }
 
-  function pickAnchorEl () {
-    if (props.target === false || props.target === '' || proxy.$el.parentNode === null) {
+  function pickAnchorEl() {
+    if (
+      props.target === false ||
+      props.target === '' ||
+      proxy.$el.parentNode === null
+    ) {
       anchorEl.value = null
-    }
-    else if (props.target === true) {
+    } else if (props.target === true) {
       setAnchorEl(proxy.$el.parentNode)
-    }
-    else {
+    } else {
       let el = props.target
 
       if (typeof props.target === 'string') {
         try {
           el = document.querySelector(props.target)
-        }
-        catch (err) {
+        } catch {
           el = void 0
         }
       }
@@ -170,50 +176,61 @@ export default function ({
       if (el !== void 0 && el !== null) {
         anchorEl.value = el.$el || el
         configureAnchorEl()
-      }
-      else {
+      } else {
         anchorEl.value = null
-        console.error(`Anchor: target "${ props.target }" not found`)
+        console.error(`Anchor: target "${props.target}" not found`)
       }
     }
   }
 
-  watch(() => props.contextMenu, val => {
-    if (anchorEl.value !== null) {
-      unconfigureAnchorEl()
-      configureAnchorEl(val)
-    }
-  })
-
-  watch(() => props.target, () => {
-    if (anchorEl.value !== null) {
-      unconfigureAnchorEl()
+  watch(
+    () => props.contextMenu,
+    val => {
+      if (anchorEl.value !== null) {
+        unconfigureAnchorEl()
+        configureAnchorEl(val)
+      }
     }
+  )
 
-    pickAnchorEl()
-  })
-
-  watch(() => props.noParentEvent, val => {
-    if (anchorEl.value !== null) {
-      if (val === true) {
+  watch(
+    () => props.target,
+    () => {
+      if (anchorEl.value !== null) {
         unconfigureAnchorEl()
       }
-      else {
-        configureAnchorEl()
+
+      pickAnchorEl()
+    }
+  )
+
+  watch(
+    () => props.noParentEvent,
+    val => {
+      if (anchorEl.value !== null) {
+        if (val === true) {
+          unconfigureAnchorEl()
+        } else {
+          configureAnchorEl()
+        }
       }
     }
-  })
+  )
 
   onMounted(() => {
     pickAnchorEl()
 
-    if (avoidEmit !== true && props.modelValue === true && anchorEl.value === null) {
+    if (
+      avoidEmit !== true &&
+      props.modelValue === true &&
+      anchorEl.value === null
+    ) {
       emit('update:modelValue', false)
     }
   })
 
   onBeforeUnmount(() => {
-    touchTimer !== null && clearTimeout(touchTimer)
+    if (touchTimer !== null) clearTimeout(touchTimer)
     unconfigureAnchorEl()
   })
 

package/src/composables/private.use-anchor/use-anchor.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-anchor/use-anchor-static" ],
+  "mixins": ["composables/private.use-anchor/use-anchor-static"],
 
   "props": {
     "context-menu": {

package/src/composables/private.use-dark/use-dark.js

@@ -7,11 +7,7 @@ export const useDarkProps = {
   }
 }
 
-export default function (props, $q) {
+export default function useDark(props, $q) {
   // return isDark
-  return computed(() => (
-    props.dark === null
-      ? $q.dark.isActive
-      : props.dark
-  ))
+  return computed(() => (props.dark === null ? $q.dark.isActive : props.dark))
 }

package/src/composables/private.use-dark/use-dark.test.js

@@ -15,9 +15,7 @@ describe('[useDark API]', () => {
   describe('[Functions]', () => {
     describe('[(function)default]', () => {
       test('has correct return value', () => {
-        expect(
-          useDark({}, {})
-        ).$ref()
+        expect(useDark({}, {})).$ref()
       })
 
       test('keeps account of $q.dark when prop is null', () => {
@@ -27,15 +25,11 @@ describe('[useDark API]', () => {
           }
         }
 
-        expect(
-          useDark({ dark: null }, $q)
-        ).$ref(true)
+        expect(useDark({ dark: null }, $q)).$ref(true)
 
         $q.dark.isActive = false
 
-        expect(
-          useDark({ dark: null }, $q)
-        ).$ref(false)
+        expect(useDark({ dark: null }, $q)).$ref(false)
       })
 
       test('returns prop value regardless of $q.dark', () => {
@@ -45,23 +39,15 @@ describe('[useDark API]', () => {
           }
         }
 
-        expect(
-          useDark({ dark: true }, $q)
-        ).$ref(true)
+        expect(useDark({ dark: true }, $q)).$ref(true)
 
-        expect(
-          useDark({ dark: false }, $q)
-        ).$ref(false)
+        expect(useDark({ dark: false }, $q)).$ref(false)
 
         $q.dark.isActive = false
 
-        expect(
-          useDark({ dark: true }, $q)
-        ).$ref(true)
+        expect(useDark({ dark: true }, $q)).$ref(true)
 
-        expect(
-          useDark({ dark: false }, $q)
-        ).$ref(false)
+        expect(useDark({ dark: false }, $q)).$ref(false)
       })
     })
   })