quasar 2.18.7 → 2.19.1

package/src/components/icon/QIcon.js

@@ -1,6 +1,8 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
+import useSize, {
+  useSizeProps
+} from '../../composables/private.use-size/use-size.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
@@ -8,19 +10,19 @@ import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
 const defaultViewBox = '0 0 24 24'
 
 const sameFn = i => i
-const ionFn = i => `ionicons ${ i }`
+const ionFn = i => `ionicons ${i}`
 
 const libMap = {
-  'mdi-': i => `mdi ${ i }`,
+  'mdi-': i => `mdi ${i}`,
   'icon-': sameFn, // fontawesome equiv
-  'bt-': i => `bt ${ i }`,
-  'eva-': i => `eva ${ i }`,
+  'bt-': i => `bt ${i}`,
+  'eva-': i => `eva ${i}`,
   'ion-md': ionFn,
   'ion-ios': ionFn,
   'ion-logo': ionFn,
   'iconfont ': sameFn,
-  'ti-': i => `themify-icon ${ i }`,
-  'bi-': i => `bootstrap-icons ${ i }`,
+  'ti-': i => `themify-icon ${i}`,
+  'bi-': i => `bootstrap-icons ${i}`,
   'i-': sameFn // UnoCSS pure icons
 }
 
@@ -43,7 +45,8 @@ const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faRE = /^(fa-(classic|sharp|solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /
+const faRE =
+  /^(fa-(classic|sharp|solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /
 
 export default createComponent({
   name: 'QIcon',
@@ -62,15 +65,18 @@ export default createComponent({
     right: Boolean
   },
 
-  setup (props, { slots }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
     const sizeStyle = useSize(props)
 
-    const classes = computed(() =>
-      'q-icon'
-      + (props.left === true ? ' on-left' : '') // TODO Qv3: drop this
-      + (props.right === true ? ' on-right' : '')
-      + (props.color !== void 0 ? ` text-${ props.color }` : '')
+    const classes = computed(
+      () =>
+        'q-icon' +
+        (props.left === true ? ' on-left' : '') + // TODO Qv3: drop this
+        (props.right === true ? ' on-right' : '') +
+        (props.color !== void 0 ? ` text-${props.color}` : '')
     )
 
     const type = computed(() => {
@@ -89,26 +95,23 @@ export default createComponent({
             if (icon === 'none' || !icon) {
               return { none: true }
             }
-          }
-          else {
+          } else {
             return {
               cls: res.cls,
-              content: res.content !== void 0
-                ? res.content
-                : ' '
+              content: res.content !== void 0 ? res.content : ' '
             }
           }
         }
       }
 
       if (mRE.test(icon) === true) {
-        const [ def, viewBox = defaultViewBox ] = icon.split('|')
+        const [def, viewBox = defaultViewBox] = icon.split('|')
 
         return {
           svg: true,
           viewBox,
           nodes: def.split('&&').map(path => {
-            const [ d, style, transform ] = path.split('@@')
+            const [d, style, transform] = path.split('@@')
             return h('path', { style, d, transform })
           })
         }
@@ -122,7 +125,7 @@ export default createComponent({
       }
 
       if (svgUseRE.test(icon) === true) {
-        const [ def, viewBox = defaultViewBox ] = icon.split('|')
+        const [def, viewBox = defaultViewBox] = icon.split('|')
 
         return {
           svguse: true,
@@ -135,15 +138,12 @@ export default createComponent({
       const matches = icon.match(libRE)
 
       if (matches !== null) {
-        cls = libMap[ matches[ 1 ] ](icon)
-      }
-      else if (faRE.test(icon) === true) {
+        cls = libMap[matches[1]](icon)
+      } else if (faRE.test(icon) === true) {
         cls = icon
-      }
-      else if (ionRE.test(icon) === true) {
-        cls = `ionicons ion-${ $q.platform.is.ios === true ? 'ios' : 'md' }${ icon.substring(3) }`
-      }
-      else if (symRE.test(icon) === true) {
+      } else if (ionRE.test(icon) === true) {
+        cls = `ionicons ion-${$q.platform.is.ios === true ? 'ios' : 'md'}${icon.substring(3)}`
+      } else if (symRE.test(icon) === true) {
         // "notranslate" class is for Google Translate
         // to avoid tampering with Material Symbols ligature font
         //
@@ -151,15 +151,14 @@ export default createComponent({
         // keep the 'material-symbols' at the end of the string.
         cls = 'notranslate material-symbols'
 
-        const matches = icon.match(symRE)
-        if (matches !== null) {
+        const symMatches = icon.match(symRE)
+        if (symMatches !== null) {
           icon = icon.substring(6)
-          cls += symMap[ matches[ 1 ] ]
+          cls += symMap[symMatches[1]]
         }
 
         content = icon
-      }
-      else {
+      } else {
         // "notranslate" class is for Google Translate
         // to avoid tampering with Material Icons ligature font
         //
@@ -167,10 +166,10 @@ export default createComponent({
         // keep the 'material-icons' at the end of the string.
         cls = 'notranslate material-icons'
 
-        const matches = icon.match(matRE)
-        if (matches !== null) {
+        const matMatches = icon.match(matRE)
+        if (matMatches !== null) {
           icon = icon.substring(2)
-          cls += matMap[ matches[ 1 ] ]
+          cls += matMap[matches[1]]
         }
 
         content = icon
@@ -186,7 +185,7 @@ export default createComponent({
       const data = {
         class: classes.value,
         style: sizeStyle.value,
-        'aria-hidden': 'true',
+        'aria-hidden': 'true'
       }
 
       if (type.value.none === true) {
@@ -194,36 +193,50 @@ export default createComponent({
       }
 
       if (type.value.img === true) {
-        return h(props.tag, data, hMergeSlot(slots.default, [
-          h('img', { src: type.value.src })
-        ]))
+        return h(
+          props.tag,
+          data,
+          hMergeSlot(slots.default, [h('img', { src: type.value.src })])
+        )
       }
 
       if (type.value.svg === true) {
-        return h(props.tag, data, hMergeSlot(slots.default, [
-          h('svg', {
-            viewBox: type.value.viewBox || '0 0 24 24'
-          }, type.value.nodes)
-        ]))
+        return h(
+          props.tag,
+          data,
+          hMergeSlot(slots.default, [
+            h(
+              'svg',
+              {
+                viewBox: type.value.viewBox || '0 0 24 24'
+              },
+              type.value.nodes
+            )
+          ])
+        )
       }
 
       if (type.value.svguse === true) {
-        return h(props.tag, data, hMergeSlot(slots.default, [
-          h('svg', {
-            viewBox: type.value.viewBox
-          }, [
-            h('use', { 'xlink:href': type.value.src })
+        return h(
+          props.tag,
+          data,
+          hMergeSlot(slots.default, [
+            h(
+              'svg',
+              {
+                viewBox: type.value.viewBox
+              },
+              [h('use', { 'xlink:href': type.value.src })]
+            )
           ])
-        ]))
+        )
       }
 
       if (type.value.cls !== void 0) {
         data.class += ' ' + type.value.cls
       }
 
-      return h(props.tag, data, hMergeSlot(slots.default, [
-        type.value.content
-      ]))
+      return h(props.tag, data, hMergeSlot(slots.default, [type.value.content]))
     }
   }
 })

package/src/components/icon/QIcon.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-size/use-size" ],
+  "mixins": ["composables/private.use-size/use-size"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/icon"
@@ -10,7 +10,7 @@
       "extends": "tag",
       "desc": "HTML tag to render, unless no icon is supplied or it's an svg icon",
       "default": "'i'",
-      "examples": [ "'div'", "'i'" ]
+      "examples": ["'div'", "'i'"]
     },
 
     "name": {

package/src/components/icon/index.js

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

package/src/components/img/QImg.js

@@ -1,9 +1,19 @@
-import { h, ref, computed, watch, onMounted, Transition, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  Transition,
+  getCurrentInstance
+} from 'vue'
 
 import QSpinner from '../spinner/QSpinner.js'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
-import useRatio, { useRatioProps } from '../../composables/private.use-ratio/use-ratio.js'
+import useRatio, {
+  useRatioProps
+} from '../../composables/private.use-ratio/use-ratio.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -34,7 +44,7 @@ export default createComponent({
       default: 'lazy'
     },
     loadingShowDelay: {
-      type: [ Number, String ],
+      type: [Number, String],
       default: 0
     },
 
@@ -45,7 +55,7 @@ export default createComponent({
     width: String,
     height: String,
     initialRatio: {
-      type: [ Number, String ],
+      type: [Number, String],
       default: defaultRatio
     },
 
@@ -72,40 +82,39 @@ export default createComponent({
     spinnerSize: String
   },
 
-  emits: [ 'load', 'error' ],
+  emits: ['load', 'error'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const naturalRatio = ref(props.initialRatio)
     const ratioStyle = useRatio(props, naturalRatio)
     const vm = getCurrentInstance()
 
-    const { registerTimeout: registerLoadTimeout, removeTimeout: removeLoadTimeout } = useTimeout()
-    const { registerTimeout: registerLoadShowTimeout, removeTimeout: removeLoadShowTimeout } = useTimeout()
-
-    const placeholderImg = computed(() => (
-      props.placeholderSrc !== void 0
-        ? { src: props.placeholderSrc }
-        : null
-    ))
+    const {
+      registerTimeout: registerLoadTimeout,
+      removeTimeout: removeLoadTimeout
+    } = useTimeout()
+    const {
+      registerTimeout: registerLoadShowTimeout,
+      removeTimeout: removeLoadShowTimeout
+    } = useTimeout()
+
+    const placeholderImg = computed(() =>
+      props.placeholderSrc !== void 0 ? { src: props.placeholderSrc } : null
+    )
 
-    const errorImg = computed(() => (
-      props.errorSrc !== void 0
-        ? { src: props.errorSrc, __qerror: true }
-        : null
-    ))
+    const errorImg = computed(() =>
+      props.errorSrc !== void 0 ? { src: props.errorSrc, __qerror: true } : null
+    )
 
-    const images = [
-      ref(null),
-      ref(placeholderImg.value)
-    ]
+    const images = [ref(null), ref(placeholderImg.value)]
 
     const position = ref(0)
 
     const isLoading = ref(false)
     const hasError = ref(false)
 
-    const classes = computed(() =>
-      `q-img q-img--${ props.noNativeMenu === true ? 'no-' : '' }menu`
+    const classes = computed(
+      () => `q-img q-img--${props.noNativeMenu === true ? 'no-' : ''}menu`
     )
 
     const style = computed(() => ({
@@ -113,10 +122,11 @@ export default createComponent({
       height: props.height
     }))
 
-    const imgClass = computed(() =>
-      `q-img__image ${ props.imgClass !== void 0 ? props.imgClass + ' ' : '' }`
-      + `q-img__image--with${ props.noTransition === true ? 'out' : '' }-transition`
-      + ' q-img__image--'
+    const imgClass = computed(
+      () =>
+        `q-img__image ${props.imgClass !== void 0 ? props.imgClass + ' ' : ''}` +
+        `q-img__image--with${props.noTransition === true ? 'out' : ''}-transition` +
+        ' q-img__image--'
     )
 
     const imgStyle = computed(() => ({
@@ -125,7 +135,7 @@ export default createComponent({
       objectPosition: props.position
     }))
 
-    function setLoading () {
+    function setLoading() {
       removeLoadShowTimeout()
 
       if (props.loadingShowDelay === 0) {
@@ -138,42 +148,42 @@ export default createComponent({
       }, props.loadingShowDelay)
     }
 
-    function clearLoading () {
+    function clearLoading() {
       removeLoadShowTimeout()
       isLoading.value = false
     }
 
-    function onLoad ({ target }) {
+    function onLoad({ target }) {
       if (vmIsDestroyed(vm) === false) {
         removeLoadTimeout()
 
-        naturalRatio.value = target.naturalHeight === 0
-          ? 0.5
-          : target.naturalWidth / target.naturalHeight
+        naturalRatio.value =
+          target.naturalHeight === 0
+            ? 0.5
+            : target.naturalWidth / target.naturalHeight
 
         waitForCompleteness(target, 1)
       }
     }
 
-    function waitForCompleteness (target, count) {
+    function waitForCompleteness(target, count) {
       // protect against running forever
       if (count === 1000 || vmIsDestroyed(vm) === true) return
 
       if (target.complete === true) {
         onReady(target)
-      }
-      else {
+      } else {
         registerLoadTimeout(() => {
           waitForCompleteness(target, count + 1)
         }, 50)
       }
     }
 
-    function onReady (target) {
+    function onReady(target) {
       if (vmIsDestroyed(vm) === true) return
 
       position.value = position.value ^ 1
-      images[ position.value ].value = null
+      images[position.value].value = null
 
       clearLoading()
 
@@ -184,19 +194,19 @@ export default createComponent({
       emit('load', target.currentSrc || target.src)
     }
 
-    function onError (err) {
+    function onError(err) {
       removeLoadTimeout()
       clearLoading()
 
       hasError.value = true
-      images[ position.value ].value = errorImg.value
-      images[ position.value ^ 1 ].value = placeholderImg.value
+      images[position.value].value = errorImg.value
+      images[position.value ^ 1].value = placeholderImg.value
 
       emit('error', err)
     }
 
-    function getImage (index) {
-      const img = images[ index ].value
+    function getImage(index) {
+      const img = images[index].value
 
       const data = {
         key: 'img_' + index,
@@ -221,8 +231,7 @@ export default createComponent({
           onLoad,
           onError
         })
-      }
-      else {
+      } else {
         data.class += 'loaded'
       }
 
@@ -233,58 +242,60 @@ export default createComponent({
       )
     }
 
-    function getContent () {
+    function getContent() {
       if (isLoading.value === false) {
-        return h('div', {
-          key: 'content',
-          class: 'q-img__content absolute-full q-anchor--skip'
-        }, hSlot(slots[ hasError.value === true ? 'error' : 'default' ]))
+        return h(
+          'div',
+          {
+            key: 'content',
+            class: 'q-img__content absolute-full q-anchor--skip'
+          },
+          hSlot(slots[hasError.value === true ? 'error' : 'default'])
+        )
       }
 
-      return h('div', {
-        key: 'loading',
-        class: 'q-img__loading absolute-full flex flex-center'
-      }, (
+      return h(
+        'div',
+        {
+          key: 'loading',
+          class: 'q-img__loading absolute-full flex flex-center'
+        },
         slots.loading !== void 0
           ? slots.loading()
-          : (
-              props.noSpinner === true
-                ? void 0
-                : [
-                    h(QSpinner, {
-                      color: props.spinnerColor,
-                      size: props.spinnerSize
-                    })
-                  ]
-            )
-      ))
+          : props.noSpinner === true
+            ? void 0
+            : [
+                h(QSpinner, {
+                  color: props.spinnerColor,
+                  size: props.spinnerSize
+                })
+              ]
+      )
     }
 
     if (__QUASAR_SSR_SERVER__ !== true) {
-      function watchSrc () {
+      function watchSrc() {
         watch(
-          () => (
+          () =>
             props.src || props.srcset || props.sizes
               ? {
                   src: props.src,
                   srcset: props.srcset,
                   sizes: props.sizes
                 }
-              : null
-          ),
+              : null,
           imgProps => {
             removeLoadTimeout()
             hasError.value = false
 
             if (imgProps === null) {
               clearLoading()
-              images[ position.value ^ 1 ].value = placeholderImg.value
-            }
-            else {
+              images[position.value ^ 1].value = placeholderImg.value
+            } else {
               setLoading()
             }
 
-            images[ position.value ].value = imgProps
+            images[position.value].value = imgProps
           },
           { immediate: true }
         )
@@ -292,8 +303,7 @@ export default createComponent({
 
       if (isRuntimeSsrPreHydration.value === true) {
         onMounted(watchSrc)
-      }
-      else {
+      } else {
         watchSrc()
       }
     }
@@ -302,34 +312,30 @@ export default createComponent({
       const content = []
 
       if (ratioStyle.value !== null) {
-        content.push(
-          h('div', { key: 'filler', style: ratioStyle.value })
-        )
+        content.push(h('div', { key: 'filler', style: ratioStyle.value }))
       }
 
-      if (images[ 0 ].value !== null) {
-        content.push(
-          getImage(0)
-        )
+      if (images[0].value !== null) {
+        content.push(getImage(0))
       }
 
-      if (images[ 1 ].value !== null) {
-        content.push(
-          getImage(1)
-        )
+      if (images[1].value !== null) {
+        content.push(getImage(1))
       }
 
-      content.push(
-        h(Transition, { name: 'q-transition--fade' }, getContent)
-      )
+      content.push(h(Transition, { name: 'q-transition--fade' }, getContent))
 
-      return h('div', {
-        key: 'main',
-        class: classes.value,
-        style: style.value,
-        role: 'img',
-        'aria-label': props.alt
-      }, content)
+      return h(
+        'div',
+        {
+          key: 'main',
+          class: classes.value,
+          style: style.value,
+          role: 'img',
+          'aria-label': props.alt
+        },
+        content
+      )
     }
   }
 })