quasar 2.18.6 → 2.19.0

package/src/components/img/QImg.json

@@ -3,7 +3,7 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/img"
   },
 
-  "mixins": [ "composables/private.use-ratio/use-ratio" ],
+  "mixins": ["composables/private.use-ratio/use-ratio"],
 
   "props": {
     "src": {
@@ -23,7 +23,7 @@
       "type": "String",
       "desc": "Same syntax as <img> srcset attribute",
       "link": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes",
-      "examples": [ "'elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w'" ],
+      "examples": ["'elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w'"],
       "category": "model"
     },
 
@@ -31,7 +31,9 @@
       "type": "String",
       "desc": "Same syntax as <img> sizes attribute",
       "link": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes",
-      "examples": [ "'(max-width: 320px) 280px, (max-width: 480px) 440px, 800px'" ],
+      "examples": [
+        "'(max-width: 320px) 280px, (max-width: 480px) 440px, 800px'"
+      ],
       "category": "model"
     },
 
@@ -71,7 +73,7 @@
     },
 
     "initial-ratio": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Use it when not specifying 'ratio' but still wanting an initial aspect ratio",
       "default": "1.7778",
       "examples": [
@@ -84,14 +86,14 @@
     "width": {
       "type": "String",
       "desc": "Forces image width; Must also include the unit (px or %)",
-      "examples": [ "'280px'", "'70%'" ],
+      "examples": ["'280px'", "'70%'"],
       "category": "style"
     },
 
     "height": {
       "type": "String",
       "desc": "Forces image height; Must also include the unit (px or %)",
-      "examples": [ "'280px'", "'70%'" ],
+      "examples": ["'280px'", "'70%'"],
       "category": "style"
     },
 
@@ -99,15 +101,15 @@
       "type": "String",
       "desc": "Lazy or immediate load; Same syntax as <img> loading attribute",
       "default": "'lazy'",
-      "values": [ "'lazy'", "'eager'" ],
+      "values": ["'lazy'", "'eager'"],
       "category": "behavior"
     },
 
     "loading-show-delay": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Delay showing the spinner when image changes; Gives time for the browser to load the image from cache to prevent flashing the spinner unnecessarily; Value should represent milliseconds",
       "default": "0",
-      "examples": [ "500", "'700'" ],
+      "examples": ["500", "'700'"],
       "category": "behavior",
       "addedIn": "v2.14.6"
     },
@@ -115,14 +117,14 @@
     "crossorigin": {
       "type": "String",
       "desc": "Same syntax as <img> crossorigin attribute",
-      "values": [ "'anonymous'", "'use-credentials'" ],
+      "values": ["'anonymous'", "'use-credentials'"],
       "category": "behavior"
     },
 
     "decoding": {
       "type": "String",
       "desc": "Same syntax as <img> decoding attribute",
-      "values": [ "'sync'", "'async'", "'auto'" ],
+      "values": ["'sync'", "'async'", "'auto'"],
       "category": "behavior"
     },
 
@@ -146,7 +148,7 @@
       "type": "String",
       "desc": "Provides a hint of the relative priority to use when fetching the image",
       "default": "'auto'",
-      "values": [ "'high'", "'low'", "'auto'" ],
+      "values": ["'high'", "'low'", "'auto'"],
       "category": "behavior",
       "addedIn": "v2.6.6"
     },
@@ -155,7 +157,7 @@
       "type": "String",
       "desc": "How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop",
       "default": "'cover'",
-      "values": [ "'cover'", "'fill'", "'contain'", "'none'", "'scale-down'" ],
+      "values": ["'cover'", "'fill'", "'contain'", "'none'", "'scale-down'"],
       "category": "style"
     },
 
@@ -163,14 +165,14 @@
       "type": "String",
       "desc": "The alignment of the image into the container; Equivalent of the object-position CSS prop",
       "default": "'50% 50%'",
-      "examples": [ "'0 0'", "'20px 50px'" ],
+      "examples": ["'0 0'", "'20px 50px'"],
       "category": "style"
     },
 
     "alt": {
       "type": "String",
       "desc": "Specifies an alternate text for the image, if the image cannot be displayed",
-      "examples": [ "'Two cats'" ],
+      "examples": ["'Two cats'"],
       "category": "miscellaneous"
     },
 
@@ -183,7 +185,7 @@
     "img-class": {
       "type": "String",
       "desc": "CSS classes to be attributed to the native img element",
-      "examples": [ "'my-special-class'" ],
+      "examples": ["'my-special-class'"],
       "category": "style"
     },
 
@@ -191,7 +193,7 @@
       "type": "Object",
       "tsType": "VueStyleObjectProp",
       "desc": "Apply CSS to the native img element",
-      "examples": [ "{ transform: 'rotate(45deg)' }"],
+      "examples": ["{ transform: 'rotate(45deg)' }"],
       "category": "style"
     },
 
@@ -247,7 +249,7 @@
         "src": {
           "type": "String",
           "desc": "URL of image that has been loaded; useful when using 'srcset' and/or 'sizes'",
-          "examples": [ "'https://some-site.net/some-img.gif'" ]
+          "examples": ["'https://some-site.net/some-img.gif'"]
         }
       }
     },

package/src/components/img/index.js

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

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -1,9 +1,26 @@
-import { h, ref, computed, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onActivated,
+  onDeactivated,
+  onBeforeUnmount,
+  nextTick,
+  getCurrentInstance
+} from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import debounce from '../../utils/debounce/debounce.js'
 import { height } from '../../utils/dom/dom.js'
-import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVerticalScrollPosition, scrollTargetProp } from '../../utils/scroll/scroll.js'
+import {
+  getScrollTarget,
+  getScrollHeight,
+  getVerticalScrollPosition,
+  setVerticalScrollPosition,
+  scrollTargetProp
+} from '../../utils/scroll/scroll.js'
 import { listenOpts } from '../../utils/event/event.js'
 import { hSlot, hUniqueSlot } from '../../utils/private.render/render.js'
 
@@ -19,7 +36,7 @@ export default createComponent({
     },
 
     debounce: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 100
     },
 
@@ -34,9 +51,9 @@ export default createComponent({
     reverse: Boolean
   },
 
-  emits: [ 'load' ],
+  emits: ['load'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const isFetching = ref(false)
     const isWorking = ref(true)
     const rootRef = ref(null)
@@ -45,39 +62,45 @@ export default createComponent({
     let index = props.initialIndex
     let localScrollTarget, poll
 
-    const classes = computed(() =>
-      'q-infinite-scroll__loading'
-      + (isFetching.value === true ? '' : ' invisible')
+    const classes = computed(
+      () =>
+        'q-infinite-scroll__loading' +
+        (isFetching.value === true ? '' : ' invisible')
     )
 
-    function immediatePoll () {
+    function immediatePoll() {
       if (
-        props.disable === true
-        || isFetching.value === true
-        || isWorking.value === false
-      ) return
+        props.disable === true ||
+        isFetching.value === true ||
+        isWorking.value === false
+      ) {
+        return
+      }
 
-      const
-        scrollHeight = getScrollHeight(localScrollTarget),
+      const scrollHeight = getScrollHeight(localScrollTarget),
         scrollPosition = getVerticalScrollPosition(localScrollTarget),
         containerHeight = height(localScrollTarget)
 
       if (props.reverse === false) {
-        if (Math.round(scrollPosition + containerHeight + props.offset) >= Math.round(scrollHeight)) {
+        if (
+          Math.round(scrollPosition + containerHeight + props.offset) >=
+          Math.round(scrollHeight)
+        ) {
           trigger()
         }
-      }
-      else if (Math.round(scrollPosition) <= props.offset) {
+      } else if (Math.round(scrollPosition) <= props.offset) {
         trigger()
       }
     }
 
-    function trigger () {
+    function trigger() {
       if (
-        props.disable === true
-        || isFetching.value === true
-        || isWorking.value === false
-      ) return
+        props.disable === true ||
+        isFetching.value === true ||
+        isWorking.value === false
+      ) {
+        return
+      }
 
       index++
       isFetching.value = true
@@ -89,30 +112,31 @@ export default createComponent({
           isFetching.value = false
           nextTick(() => {
             if (props.reverse === true) {
-              const
-                heightAfter = getScrollHeight(localScrollTarget),
+              const heightAfter = getScrollHeight(localScrollTarget),
                 scrollPosition = getVerticalScrollPosition(localScrollTarget),
                 heightDifference = heightAfter - heightBefore
 
-              setVerticalScrollPosition(localScrollTarget, scrollPosition + heightDifference)
+              setVerticalScrollPosition(
+                localScrollTarget,
+                scrollPosition + heightDifference
+              )
             }
 
             if (isDone === true) {
               stop()
-            }
-            else if (rootRef.value) {
-              rootRef.value.closest('body') && poll()
+            } else if (rootRef.value) {
+              if (rootRef.value.closest('body')) poll()
             }
           })
         }
       })
     }
 
-    function reset () {
+    function reset() {
       index = 0
     }
 
-    function resume () {
+    function resume() {
       if (isWorking.value === false) {
         isWorking.value = true
         localScrollTarget.addEventListener('scroll', poll, passive)
@@ -121,7 +145,7 @@ export default createComponent({
       immediatePoll()
     }
 
-    function stop () {
+    function stop() {
       if (isWorking.value === true) {
         isWorking.value = false
         isFetching.value = false
@@ -130,7 +154,7 @@ export default createComponent({
       }
     }
 
-    function updateScrollTarget () {
+    function updateScrollTarget() {
       if (localScrollTarget && isWorking.value === true) {
         localScrollTarget.removeEventListener('scroll', poll, passive)
       }
@@ -141,29 +165,32 @@ export default createComponent({
         localScrollTarget.addEventListener('scroll', poll, passive)
 
         if (props.reverse === true) {
-          const
-            scrollHeight = getScrollHeight(localScrollTarget),
+          const scrollHeight = getScrollHeight(localScrollTarget),
             containerHeight = height(localScrollTarget)
 
-          setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight)
+          setVerticalScrollPosition(
+            localScrollTarget,
+            scrollHeight - containerHeight
+          )
         }
 
         immediatePoll()
       }
     }
 
-    function setIndex (newIndex) {
+    function setIndex(newIndex) {
       index = newIndex
     }
 
-    function setDebounce (val) {
+    function setDebounce(val) {
       val = parseInt(val, 10)
 
       const oldPoll = poll
 
-      poll = val <= 0
-        ? immediatePoll
-        : debounce(immediatePoll, isNaN(val) === true ? 100 : val)
+      poll =
+        val <= 0
+          ? immediatePoll
+          : debounce(immediatePoll, isNaN(val) === true ? 100 : val)
 
       if (localScrollTarget && isWorking.value === true) {
         if (oldPoll !== void 0) {
@@ -174,36 +201,53 @@ export default createComponent({
       }
     }
 
-    function updateSvgAnimations (isRetry) {
+    function updateSvgAnimations(isRetry) {
       if (renderLoadingSlot.value === true) {
         if (loadingRef.value === null) {
-          isRetry !== true && nextTick(() => { updateSvgAnimations(true) })
+          if (isRetry !== true) {
+            nextTick(() => {
+              updateSvgAnimations(true)
+            })
+          }
           return
         }
 
         // we need to pause svg animations (if any) when hiding
         // otherwise the browser will keep on recalculating the style
-        const action = `${ isFetching.value === true ? 'un' : '' }pauseAnimations`
+        const action = `${isFetching.value === true ? 'un' : ''}pauseAnimations`
         Array.from(loadingRef.value.getElementsByTagName('svg')).forEach(el => {
-          el[ action ]()
+          el[action]()
         })
       }
     }
 
-    const renderLoadingSlot = computed(() => props.disable !== true && isWorking.value === true)
-
-    watch([ isFetching, renderLoadingSlot ], () => { updateSvgAnimations() })
+    const renderLoadingSlot = computed(
+      () => props.disable !== true && isWorking.value === true
+    )
 
-    watch(() => props.disable, val => {
-      if (val === true) { stop() }
-      else { resume() }
+    watch([isFetching, renderLoadingSlot], () => {
+      updateSvgAnimations()
     })
 
-    watch(() => props.reverse, () => {
-      if (isFetching.value === false && isWorking.value === true) {
-        immediatePoll()
+    watch(
+      () => props.disable,
+      val => {
+        if (val === true) {
+          stop()
+        } else {
+          resume()
+        }
       }
-    })
+    )
+
+    watch(
+      () => props.reverse,
+      () => {
+        if (isFetching.value === false && isWorking.value === true) {
+          immediatePoll()
+        }
+      }
+    )
 
     watch(() => props.scrollTarget, updateScrollTarget)
     watch(() => props.debounce, setDebounce)
@@ -232,29 +276,44 @@ export default createComponent({
       setDebounce(props.debounce)
       updateScrollTarget()
 
-      isFetching.value === false && updateSvgAnimations()
+      if (isFetching.value === false) updateSvgAnimations()
     })
 
     // expose public methods
     const vm = getCurrentInstance()
     Object.assign(vm.proxy, {
-      poll: () => { poll?.() },
-      trigger, stop, reset, resume, setIndex, updateScrollTarget
+      poll: () => {
+        poll?.()
+      },
+      trigger,
+      stop,
+      reset,
+      resume,
+      setIndex,
+      updateScrollTarget
     })
 
     return () => {
       const child = hUniqueSlot(slots.default, [])
 
       if (renderLoadingSlot.value === true) {
-        child[ props.reverse === false ? 'push' : 'unshift' ](
-          h('div', { ref: loadingRef, class: classes.value }, hSlot(slots.loading))
+        child[props.reverse === false ? 'push' : 'unshift'](
+          h(
+            'div',
+            { ref: loadingRef, class: classes.value },
+            hSlot(slots.loading)
+          )
         )
       }
 
-      return h('div', {
-        class: 'q-infinite-scroll',
-        ref: rootRef
-      }, child)
+      return h(
+        'div',
+        {
+          class: 'q-infinite-scroll',
+          ref: rootRef
+        },
+        child
+      )
     }
   }
 })

package/src/components/infinite-scroll/QInfiniteScroll.json

@@ -12,7 +12,7 @@
     },
 
     "debounce": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Debounce amount (in milliseconds)",
       "default": "100",
       "category": "behavior"

package/src/components/infinite-scroll/index.js

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

package/src/components/inner-loading/QInnerLoading.js

@@ -3,8 +3,12 @@ import { h, computed, Transition, getCurrentInstance } from 'vue'
 import QSpinner from '../spinner/QSpinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import useTransition, { useTransitionProps } from '../../composables/private.use-transition/use-transition.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import useTransition, {
+  useTransitionProps
+} from '../../composables/private.use-transition/use-transition.js'
 
 export default createComponent({
   name: 'QInnerLoading',
@@ -17,32 +21,34 @@ export default createComponent({
     color: String,
 
     size: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: '42px'
     },
 
     label: String,
     labelClass: String,
-    labelStyle: [ String, Array, Object ]
+    labelStyle: [String, Array, Object]
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
     const { transitionProps, transitionStyle } = useTransition(props)
 
-    const classes = computed(() =>
-      'q-inner-loading q--avoid-card-border absolute-full column flex-center'
-      + (isDark.value === true ? ' q-inner-loading--dark' : '')
+    const classes = computed(
+      () =>
+        'q-inner-loading q--avoid-card-border absolute-full column flex-center' +
+        (isDark.value === true ? ' q-inner-loading--dark' : '')
     )
 
-    const labelClass = computed(() =>
-      'q-inner-loading__label'
-      + (props.labelClass !== void 0 ? ` ${ props.labelClass }` : '')
+    const labelClass = computed(
+      () =>
+        'q-inner-loading__label' +
+        (props.labelClass !== void 0 ? ` ${props.labelClass}` : '')
     )
 
-    function getInner () {
+    function getInner() {
       const child = [
         h(QSpinner, {
           size: props.size,
@@ -52,25 +58,27 @@ export default createComponent({
 
       if (props.label !== void 0) {
         child.push(
-          h('div', {
-            class: labelClass.value,
-            style: props.labelStyle
-          }, [ props.label ])
+          h(
+            'div',
+            {
+              class: labelClass.value,
+              style: props.labelStyle
+            },
+            [props.label]
+          )
         )
       }
 
       return child
     }
 
-    function getContent () {
+    function getContent() {
       return props.showing === true
         ? h(
-          'div',
-          { class: classes.value, style: transitionStyle.value },
-          slots.default !== void 0
-            ? slots.default()
-            : getInner()
-        )
+            'div',
+            { class: classes.value, style: transitionStyle.value },
+            slots.default !== void 0 ? slots.default() : getInner()
+          )
         : null
     }
 

package/src/components/inner-loading/QInnerLoading.json

@@ -1,5 +1,8 @@
 {
-  "mixins": [ "composables/private.use-size/use-size", "composables/private.use-transition/use-transition" ],
+  "mixins": [
+    "composables/private.use-size/use-size",
+    "composables/private.use-transition/use-transition"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/inner-loading"
@@ -18,7 +21,7 @@
     },
 
     "size": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Size in CSS units, including unit name, or standard size name (xs|sm|md|lg|xl), for the inner Spinner (unless using the default slot)",
       "default": "'42px'"
     },
@@ -26,7 +29,7 @@
     "label": {
       "type": "String",
       "desc": "Add a label; Gets overriden when using the default slot",
-      "examples": [ "'Please wait...'" ],
+      "examples": ["'Please wait...'"],
       "category": "label",
       "addedIn": "v2.2"
     },
@@ -34,19 +37,16 @@
     "label-class": {
       "type": "String",
       "desc": "Add CSS class(es) to the label; Works along the 'label' prop only",
-      "examples": [ "'text-red q-mt-xl'" ],
+      "examples": ["'text-red q-mt-xl'"],
       "category": "label",
       "addedIn": "v2.2"
     },
 
     "label-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Apply custom style to the label; Works along the 'label' prop only",
-      "examples": [
-        "'font-size: 28px'",
-        "{ color: '#ff0000' }"
-      ],
+      "examples": ["'font-size: 28px'", "{ color: '#ff0000' }"],
       "category": "label",
       "addedIn": "v2.2"
     },

package/src/components/inner-loading/index.js

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