quasar 2.18.7 → 2.19.0

package/src/components/rating/QRating.js

@@ -2,8 +2,14 @@ import { h, ref, computed, onBeforeUpdate, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
-import { useFormProps, useFormAttrs, useFormInject } from '../../composables/use-form/private.use-form.js'
+import useSize, {
+  useSizeProps
+} from '../../composables/private.use-size/use-size.js'
+import {
+  useFormProps,
+  useFormAttrs,
+  useFormInject
+} from '../../composables/use-form/private.use-form.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
@@ -23,19 +29,19 @@ export default createComponent({
     },
 
     max: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 5
     },
 
-    icon: [ String, Array ],
-    iconHalf: [ String, Array ],
-    iconSelected: [ String, Array ],
+    icon: [String, Array],
+    iconHalf: [String, Array],
+    iconSelected: [String, Array],
 
-    iconAriaLabel: [ String, Array ],
+    iconAriaLabel: [String, Array],
 
-    color: [ String, Array ],
-    colorHalf: [ String, Array ],
-    colorSelected: [ String, Array ],
+    color: [String, Array],
+    colorHalf: [String, Array],
+    colorSelected: [String, Array],
 
     noReset: Boolean,
     noDimming: Boolean,
@@ -44,10 +50,12 @@ export default createComponent({
     disable: Boolean
   },
 
-  emits: [ 'update:modelValue' ],
+  emits: ['update:modelValue'],
 
-  setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots, emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const sizeStyle = useSize(props)
     const formAttrs = useFormAttrs(props)
@@ -57,107 +65,138 @@ export default createComponent({
 
     let iconRefs = {}
 
-    const editable = computed(() =>
-      props.readonly !== true && props.disable !== true
+    const editable = computed(
+      () => props.readonly !== true && props.disable !== true
     )
 
-    const classes = computed(() =>
-      'q-rating row inline items-center'
-      + ` q-rating--${ editable.value === true ? '' : 'non-' }editable`
-      + (props.noDimming === true ? ' q-rating--no-dimming' : '')
-      + (props.disable === true ? ' disabled' : '')
-      + (
-        props.color !== void 0 && Array.isArray(props.color) === false
-          ? ` text-${ props.color }`
-          : ''
-      )
+    const classes = computed(
+      () =>
+        'q-rating row inline items-center' +
+        ` q-rating--${editable.value === true ? '' : 'non-'}editable` +
+        (props.noDimming === true ? ' q-rating--no-dimming' : '') +
+        (props.disable === true ? ' disabled' : '') +
+        (props.color !== void 0 && Array.isArray(props.color) === false
+          ? ` text-${props.color}`
+          : '')
     )
 
     const iconData = computed(() => {
-      const
-        iconLen = Array.isArray(props.icon) === true ? props.icon.length : 0,
-        selIconLen = Array.isArray(props.iconSelected) === true ? props.iconSelected.length : 0,
-        halfIconLen = Array.isArray(props.iconHalf) === true ? props.iconHalf.length : 0,
+      const iconLen =
+          Array.isArray(props.icon) === true ? props.icon.length : 0,
+        selIconLen =
+          Array.isArray(props.iconSelected) === true
+            ? props.iconSelected.length
+            : 0,
+        halfIconLen =
+          Array.isArray(props.iconHalf) === true ? props.iconHalf.length : 0,
         colorLen = Array.isArray(props.color) === true ? props.color.length : 0,
-        selColorLen = Array.isArray(props.colorSelected) === true ? props.colorSelected.length : 0,
-        halfColorLen = Array.isArray(props.colorHalf) === true ? props.colorHalf.length : 0
+        selColorLen =
+          Array.isArray(props.colorSelected) === true
+            ? props.colorSelected.length
+            : 0,
+        halfColorLen =
+          Array.isArray(props.colorHalf) === true ? props.colorHalf.length : 0
 
       return {
         iconLen,
-        icon: iconLen > 0 ? props.icon[ iconLen - 1 ] : props.icon,
+        icon: iconLen > 0 ? props.icon[iconLen - 1] : props.icon,
         selIconLen,
-        selIcon: selIconLen > 0 ? props.iconSelected[ selIconLen - 1 ] : props.iconSelected,
+        selIcon:
+          selIconLen > 0
+            ? props.iconSelected[selIconLen - 1]
+            : props.iconSelected,
         halfIconLen,
-        halfIcon: halfIconLen > 0 ? props.iconHalf[ selIconLen - 1 ] : props.iconHalf,
+        halfIcon:
+          halfIconLen > 0 ? props.iconHalf[selIconLen - 1] : props.iconHalf,
         colorLen,
-        color: colorLen > 0 ? props.color[ colorLen - 1 ] : props.color,
+        color: colorLen > 0 ? props.color[colorLen - 1] : props.color,
         selColorLen,
-        selColor: selColorLen > 0 ? props.colorSelected[ selColorLen - 1 ] : props.colorSelected,
+        selColor:
+          selColorLen > 0
+            ? props.colorSelected[selColorLen - 1]
+            : props.colorSelected,
         halfColorLen,
-        halfColor: halfColorLen > 0 ? props.colorHalf[ halfColorLen - 1 ] : props.colorHalf
+        halfColor:
+          halfColorLen > 0 ? props.colorHalf[halfColorLen - 1] : props.colorHalf
       }
     })
 
     const iconLabel = computed(() => {
       if (typeof props.iconAriaLabel === 'string') {
-        const label = props.iconAriaLabel.length !== 0 ? `${ props.iconAriaLabel } ` : ''
-        return i => `${ label }${ i }`
+        const label =
+          props.iconAriaLabel.length !== 0 ? `${props.iconAriaLabel} ` : ''
+        return i => `${label}${i}`
       }
 
       if (Array.isArray(props.iconAriaLabel) === true) {
         const iMax = props.iconAriaLabel.length
 
         if (iMax > 0) {
-          return i => props.iconAriaLabel[ Math.min(i, iMax) - 1 ]
+          return i => props.iconAriaLabel[Math.min(i, iMax) - 1]
         }
       }
 
-      return (i, label) => `${ label } ${ i }`
+      return (i, label) => `${label} ${i}`
     })
 
     const stars = computed(() => {
-      const
-        acc = [],
+      const acc = [],
         icons = iconData.value,
         ceil = Math.ceil(props.modelValue),
         tabindex = editable.value === true ? 0 : null
 
-      const halfIndex = props.iconHalf === void 0 || ceil === props.modelValue
-        ? -1
-        : ceil
+      const halfIndex =
+        props.iconHalf === void 0 || ceil === props.modelValue ? -1 : ceil
 
       for (let i = 1; i <= props.max; i++) {
-        const
-          active = (mouseModel.value === 0 && props.modelValue >= i) || (mouseModel.value > 0 && mouseModel.value >= i),
+        const active =
+            (mouseModel.value === 0 && props.modelValue >= i) ||
+            (mouseModel.value > 0 && mouseModel.value >= i),
           half = halfIndex === i && mouseModel.value < i,
-          exSelected = mouseModel.value > 0 && (half === true ? ceil : props.modelValue) >= i && mouseModel.value < i,
-          color = half === true
-            ? (i <= icons.halfColorLen ? props.colorHalf[ i - 1 ] : icons.halfColor)
-            : (
-                icons.selColor !== void 0 && active === true
-                  ? (i <= icons.selColorLen ? props.colorSelected[ i - 1 ] : icons.selColor)
-                  : (i <= icons.colorLen ? props.color[ i - 1 ] : icons.color)
-              ),
-          name = (
+          exSelected =
+            mouseModel.value > 0 &&
+            (half === true ? ceil : props.modelValue) >= i &&
+            mouseModel.value < i,
+          color =
             half === true
-              ? (i <= icons.halfIconLen ? props.iconHalf[ i - 1 ] : icons.halfIcon)
-              : (
-                  icons.selIcon !== void 0 && (active === true || exSelected === true)
-                    ? (i <= icons.selIconLen ? props.iconSelected[ i - 1 ] : icons.selIcon)
-                    : (i <= icons.iconLen ? props.icon[ i - 1 ] : icons.icon)
-                )
-          ) || $q.iconSet.rating.icon
+              ? i <= icons.halfColorLen
+                ? props.colorHalf[i - 1]
+                : icons.halfColor
+              : icons.selColor !== void 0 && active === true
+                ? i <= icons.selColorLen
+                  ? props.colorSelected[i - 1]
+                  : icons.selColor
+                : i <= icons.colorLen
+                  ? props.color[i - 1]
+                  : icons.color,
+          name =
+            (half === true
+              ? i <= icons.halfIconLen
+                ? props.iconHalf[i - 1]
+                : icons.halfIcon
+              : icons.selIcon !== void 0 &&
+                  (active === true || exSelected === true)
+                ? i <= icons.selIconLen
+                  ? props.iconSelected[i - 1]
+                  : icons.selIcon
+                : i <= icons.iconLen
+                  ? props.icon[i - 1]
+                  : icons.icon) || $q.iconSet.rating.icon
 
         acc.push({
-          name: (
-            half === true
-              ? (i <= icons.halfIconLen ? props.iconHalf[ i - 1 ] : icons.halfIcon)
-              : (
-                  icons.selIcon !== void 0 && (active === true || exSelected === true)
-                    ? (i <= icons.selIconLen ? props.iconSelected[ i - 1 ] : icons.selIcon)
-                    : (i <= icons.iconLen ? props.icon[ i - 1 ] : icons.icon)
-                )
-          ) || $q.iconSet.rating.icon,
+          name:
+            (half === true
+              ? i <= icons.halfIconLen
+                ? props.iconHalf[i - 1]
+                : icons.halfIcon
+              : icons.selIcon !== void 0 &&
+                  (active === true || exSelected === true)
+                ? i <= icons.selIconLen
+                  ? props.iconSelected[i - 1]
+                  : icons.selIcon
+                : i <= icons.iconLen
+                  ? props.icon[i - 1]
+                  : icons.icon) || $q.iconSet.rating.icon,
 
           attrs: {
             tabindex,
@@ -166,11 +205,14 @@ export default createComponent({
             'aria-label': iconLabel.value(i, name)
           },
 
-          iconClass: 'q-rating__icon'
-            + (active === true || half === true ? ' q-rating__icon--active' : '')
-            + (exSelected === true ? ' q-rating__icon--exselected' : '')
-            + (mouseModel.value === i ? ' q-rating__icon--hovered' : '')
-            + (color !== void 0 ? ` text-${ color }` : '')
+          iconClass:
+            'q-rating__icon' +
+            (active === true || half === true
+              ? ' q-rating__icon--active'
+              : '') +
+            (exSelected === true ? ' q-rating__icon--exselected' : '') +
+            (mouseModel.value === i ? ' q-rating__icon--hovered' : '') +
+            (color !== void 0 ? ` text-${color}` : '')
         })
       }
 
@@ -181,33 +223,33 @@ export default createComponent({
       const attrs = { role: 'radiogroup' }
 
       if (props.disable === true) {
-        attrs[ 'aria-disabled' ] = 'true'
+        attrs['aria-disabled'] = 'true'
       }
       if (props.readonly === true) {
-        attrs[ 'aria-readonly' ] = 'true'
+        attrs['aria-readonly'] = 'true'
       }
 
       return attrs
     })
 
-    function set (value) {
+    function set(value) {
       if (editable.value === true) {
-        const
-          model = between(parseInt(value, 10), 1, parseInt(props.max, 10)),
-          newVal = props.noReset !== true && props.modelValue === model ? 0 : model
+        const model = between(parseInt(value, 10), 1, parseInt(props.max, 10)),
+          newVal =
+            props.noReset !== true && props.modelValue === model ? 0 : model
 
-        newVal !== props.modelValue && emit('update:modelValue', newVal)
+        if (newVal !== props.modelValue) emit('update:modelValue', newVal)
         mouseModel.value = 0
       }
     }
 
-    function setHoverValue (value) {
+    function setHoverValue(value) {
       if (editable.value === true) {
         mouseModel.value = value
       }
     }
 
-    function onKeyup (e, i) {
+    function onKeyup(e, i) {
       switch (e.keyCode) {
         case 13:
         case 32:
@@ -215,20 +257,20 @@ export default createComponent({
           return stopAndPrevent(e)
         case 37: // LEFT ARROW
         case 40: // DOWN ARROW
-          if (iconRefs[ `rt${ i - 1 }` ]) {
-            iconRefs[ `rt${ i - 1 }` ].focus()
+          if (iconRefs[`rt${i - 1}`]) {
+            iconRefs[`rt${i - 1}`].focus()
           }
           return stopAndPrevent(e)
         case 39: // RIGHT ARROW
         case 38: // UP ARROW
-          if (iconRefs[ `rt${ i + 1 }` ]) {
-            iconRefs[ `rt${ i + 1 }` ].focus()
+          if (iconRefs[`rt${i + 1}`]) {
+            iconRefs[`rt${i + 1}`].focus()
           }
           return stopAndPrevent(e)
       }
     }
 
-    function resetMouseModel () {
+    function resetMouseModel() {
       mouseModel.value = 0
     }
 
@@ -243,21 +285,34 @@ export default createComponent({
         const i = index + 1
 
         child.push(
-          h('div', {
-            key: i,
-            ref: el => { iconRefs[ `rt${ i }` ] = el },
-            class: 'q-rating__icon-container flex flex-center',
-            ...attrs,
-            onClick () { set(i) },
-            onMouseover () { setHoverValue(i) },
-            onMouseout: resetMouseModel,
-            onFocus () { setHoverValue(i) },
-            onBlur: resetMouseModel,
-            onKeyup (e) { onKeyup(e, i) }
-          }, hMergeSlot(
-            slots[ `tip-${ i }` ],
-            [ h(QIcon, { class: iconClass, name }) ]
-          ))
+          h(
+            'div',
+            {
+              key: i,
+              ref: el => {
+                iconRefs[`rt${i}`] = el
+              },
+              class: 'q-rating__icon-container flex flex-center',
+              ...attrs,
+              onClick() {
+                set(i)
+              },
+              onMouseover() {
+                setHoverValue(i)
+              },
+              onMouseout: resetMouseModel,
+              onFocus() {
+                setHoverValue(i)
+              },
+              onBlur: resetMouseModel,
+              onKeyup(e) {
+                onKeyup(e, i)
+              }
+            },
+            hMergeSlot(slots[`tip-${i}`], [
+              h(QIcon, { class: iconClass, name })
+            ])
+          )
         )
       })
 
@@ -265,11 +320,15 @@ export default createComponent({
         injectFormInput(child, 'push')
       }
 
-      return h('div', {
-        class: classes.value,
-        style: sizeStyle.value,
-        ...attributes.value
-      }, child)
+      return h(
+        'div',
+        {
+          class: classes.value,
+          style: sizeStyle.value,
+          ...attributes.value
+        },
+        child
+      )
     }
   }
 })

package/src/components/rating/QRating.json

@@ -1,5 +1,8 @@
 {
-  "mixins": [ "composables/private.use-size/use-size", "composables/use-form/private.use-form" ],
+  "mixins": [
+    "composables/private.use-size/use-size",
+    "composables/use-form/private.use-form"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/rating"
@@ -9,18 +12,22 @@
     "model-value": {
       "extends": "model-value",
       "type": "Number",
-      "examples": [ "# v-model=\"rating\"", "# :model-value=\"rating\"", "# :model-value=\"2\"" ]
+      "examples": [
+        "# v-model=\"rating\"",
+        "# :model-value=\"rating\"",
+        "# :model-value=\"2\""
+      ]
     },
 
     "max": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Number of icons to display",
       "default": "5",
       "category": "general"
     },
 
     "icon": {
-      "type": [ "String", "Array" ],
+      "type": ["String", "Array"],
       "desc": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)",
       "examples": [
         "'map'",
@@ -32,7 +39,7 @@
     },
 
     "icon-selected": {
-      "type": [ "String", "Array" ],
+      "type": ["String", "Array"],
       "desc": "Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)",
       "examples": [
         "'map'",
@@ -44,7 +51,7 @@
     },
 
     "icon-half": {
-      "type": [ "String", "Array" ],
+      "type": ["String", "Array"],
       "desc": "Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)",
       "examples": [
         "'map'",
@@ -56,29 +63,29 @@
     },
 
     "icon-aria-label": {
-      "type": [ "String", "Array" ],
+      "type": ["String", "Array"],
       "desc": "Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used",
-      "examples": [ "'Rating'", "[ 'Bad', 'Normal', 'Good' ]" ],
+      "examples": ["'Rating'", "['Bad', 'Normal', 'Good']"],
       "category": "accessibility",
       "addedIn": "v1.20.3"
     },
 
     "color": {
       "extends": "color",
-      "type": [ "String", "Array" ],
+      "type": ["String", "Array"],
       "desc": "Color name for component from the Quasar Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based)",
-      "examples": [ "[ 'accent', 'grey-7' ]" ]
+      "examples": ["['accent', 'grey-7']"]
     },
 
     "color-selected": {
       "extends": "color",
-      "type": [ "String", "Array" ],
+      "type": ["String", "Array"],
       "desc": "Color name from the Quasar Palette for selected icons"
     },
 
     "color-half": {
       "extends": "color",
-      "type": [ "String", "Array" ],
+      "type": ["String", "Array"],
       "desc": "Color name from the Quasar Palette for half selected icons"
     },
 

package/src/components/rating/index.js

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

package/src/components/resize-observer/QResizeObserver.js

@@ -1,4 +1,10 @@
-import { h, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
+import {
+  h,
+  onMounted,
+  onBeforeUnmount,
+  getCurrentInstance,
+  nextTick
+} from 'vue'
 
 import useHydration from '../../composables/use-hydration/use-hydration.js'
 
@@ -6,40 +12,49 @@ import { createComponent } from '../../utils/private.create/create.js'
 import { listenOpts, noop } from '../../utils/event/event.js'
 
 const hasObserver = typeof ResizeObserver !== 'undefined'
-const resizeProps = hasObserver === true
-  ? {}
-  : {
-      style: 'display:block;position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1;',
-      url: 'about:blank'
-    }
+const resizeProps =
+  hasObserver === true
+    ? {}
+    : {
+        style:
+          'display:block;position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1;',
+        url: 'about:blank'
+      }
 
 export default createComponent({
   name: 'QResizeObserver',
 
   props: {
     debounce: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 100
     }
   },
 
-  emits: [ 'resize' ],
+  emits: ['resize'],
 
-  setup (props, { emit }) {
-    if (__QUASAR_SSR_SERVER__) { return noop }
+  setup(props, { emit }) {
+    if (__QUASAR_SSR_SERVER__) {
+      return noop
+    }
 
-    let timer = null, targetEl, size = { width: -1, height: -1 }
+    let timer = null,
+      targetEl,
+      size = { width: -1, height: -1 }
 
-    function trigger (immediately) {
-      if (immediately === true || props.debounce === 0 || props.debounce === '0') {
+    function trigger(immediately) {
+      if (
+        immediately === true ||
+        props.debounce === 0 ||
+        props.debounce === '0'
+      ) {
         emitEvent()
-      }
-      else if (timer === null) {
+      } else if (timer === null) {
         timer = setTimeout(emitEvent, props.debounce)
       }
     }
 
-    function emitEvent () {
+    function emitEvent() {
       if (timer !== null) {
         clearTimeout(timer)
         timer = null
@@ -71,35 +86,38 @@ export default createComponent({
           observer = new ResizeObserver(trigger)
           observer.observe(targetEl)
           emitEvent()
-        }
-        else if (stop !== true) {
-          nextTick(() => { init(true) })
+        } else if (stop !== true) {
+          nextTick(() => {
+            init(true)
+          })
         }
       }
 
-      onMounted(() => { init() })
+      onMounted(() => {
+        init()
+      })
 
       onBeforeUnmount(() => {
-        timer !== null && clearTimeout(timer)
+        if (timer !== null) clearTimeout(timer)
 
         if (observer !== void 0) {
           if (observer.disconnect !== void 0) {
             observer.disconnect()
-          }
-          else if (targetEl) { // FF for Android
+          } else if (targetEl) {
+            // FF for Android
             observer.unobserve(targetEl)
           }
         }
       })
 
       return noop
-    }
-    else { // no observer, so fallback to old iframe method
+    } else {
+      // no observer, so fallback to old iframe method
       const { isHydrated } = useHydration()
 
       let curDocView
 
-      function cleanup () {
+      function cleanup() {
         if (timer !== null) {
           clearTimeout(timer)
           timer = null
@@ -108,13 +126,17 @@ export default createComponent({
         if (curDocView !== void 0) {
           // iOS is fuzzy, need to check it first
           if (curDocView.removeEventListener !== void 0) {
-            curDocView.removeEventListener('resize', trigger, listenOpts.passive)
+            curDocView.removeEventListener(
+              'resize',
+              trigger,
+              listenOpts.passive
+            )
           }
           curDocView = void 0
         }
       }
 
-      function onObjLoad () {
+      function onObjLoad() {
         cleanup()
 
         if (targetEl?.contentDocument) {
@@ -127,7 +149,7 @@ export default createComponent({
       onMounted(() => {
         nextTick(() => {
           targetEl = proxy.$el
-          targetEl && onObjLoad()
+          if (targetEl) onObjLoad()
         })
       })