quasar 2.6.5 → 2.7.1

package/src/components/badge/QBadge.js

@@ -1,7 +1,7 @@
 import { h, computed } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { hMergeSlot } from '../../utils/private/render.js'
 
 const alignValues = [ 'top', 'middle', 'bottom' ]
 
@@ -55,6 +55,6 @@ export default createComponent({
       style: style.value,
       role: 'alert',
       'aria-label': props.label
-    }, props.label !== void 0 ? props.label : hSlot(slots.default))
+    }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
   }
 })

package/src/components/badge/__tests__/QBadge.spec.js

@@ -1,5 +1,5 @@
 // import { mount } from '@cypress/vue'
-// import QBadge from '../QBadge'
+// import QBadge from '../QBadge.js'
 
 // const snapshotOptions = { customSnapshotsDir: '../src/components/badge/__tests__' }
 

package/src/components/btn/QBtn.js

@@ -329,10 +329,10 @@ export default createComponent({
       if (props.loading === true && props.percentage !== void 0) {
         child.push(
           h('span', {
-            class: 'q-btn__progress absolute-full overflow-hidden'
+            class: 'q-btn__progress absolute-full overflow-hidden' + (props.darkPercentage === true ? ' q-btn__progress--dark' : '')
           }, [
             h('span', {
-              class: 'q-btn__progress-indicator fit block' + (props.darkPercentage === true ? ' q-btn__progress--dark' : ''),
+              class: 'q-btn__progress-indicator fit block',
               style: percentageStyle.value
             })
           ])

package/src/components/btn/use-btn.json

@@ -33,7 +33,7 @@
     "href": {
       "type": "String",
       "desc": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props",
-      "examples": [ "http://quasar.dev", "href=\"https://quasar.dev\" target=\"_blank\"" ],
+      "examples": [ "https://quasar.dev", "href=\"https://quasar.dev\" target=\"_blank\"" ],
       "category": "navigation",
       "addedIn": "v2.4"
     },

package/src/components/checkbox/use-checkbox.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
@@ -61,22 +61,23 @@ export default function (type, getInner) {
     props.val !== void 0 && Array.isArray(props.modelValue)
   )
 
-  const index = computed(() => (
-    modelIsArray.value === true
-      ? props.modelValue.indexOf(props.val)
+  const index = computed(() => {
+    const val = toRaw(props.val)
+    return modelIsArray.value === true
+      ? props.modelValue.findIndex(opt => toRaw(opt) === val)
       : -1
-  ))
+  })
 
   const isTrue = computed(() => (
     modelIsArray.value === true
       ? index.value > -1
-      : props.modelValue === props.trueValue
+      : toRaw(props.modelValue) === toRaw(props.trueValue)
   ))
 
   const isFalse = computed(() => (
     modelIsArray.value === true
       ? index.value === -1
-      : props.modelValue === props.falseValue
+      : toRaw(props.modelValue) === toRaw(props.falseValue)
   ))
 
   const isIndeterminate = computed(() =>

package/src/components/dialog/QDialog.js

@@ -96,7 +96,7 @@ export default createComponent({
     const { registerTimeout, removeTimeout } = useTimeout()
     const { registerTick, removeTick } = useTick()
 
-    const { showPortal, hidePortal, portalIsActive, renderPortal } = usePortal(
+    const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
     )
 
@@ -235,6 +235,7 @@ export default createComponent({
       removeFromHistory()
       cleanup(true)
       animating.value = true
+      hidePortal()
 
       if (refocusTarget !== null) {
         refocusTarget.focus()
@@ -242,7 +243,7 @@ export default createComponent({
       }
 
       registerTimeout(() => {
-        hidePortal()
+        hidePortal(true) // done hiding, now destroy
         animating.value = false
         emit('hide', evt)
       }, props.transitionDuration)
@@ -350,8 +351,7 @@ export default createComponent({
     function onFocusChange (evt) {
       // the focus is not in a vue child component
       if (
-        showing.value === true
-        && portalIsActive.value === true
+        portalIsAccessible.value === true
         && childHasFocus(innerRef.value, evt.target) !== true
       ) {
         focus('[tabindex]:not([tabindex="-1"])')

package/src/components/dialog/QDialog.sass

@@ -39,8 +39,8 @@
         max-height: 100vh
         max-width: 100vw
         border-radius: 0 !important
-        top: 0px !important
-        left: 0px !important
+        top: 0 !important
+        left: 0 !important
 
     &--top, &--bottom
       padding-top: 0 !important

package/src/components/editor/QEditor.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import Caret from './editor-caret.js'
 import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
@@ -368,11 +368,14 @@ export default createComponent({
     }
 
     function onFocusin (e) {
+      const root = rootRef.value
+
       if (
-        rootRef.value.contains(e.target) === true
+        root !== null
+        && root.contains(e.target) === true
         && (
           e.relatedTarget === null
-          || rootRef.value.contains(e.relatedTarget) !== true
+          || root.contains(e.relatedTarget) !== true
         )
       ) {
         const prop = `inner${ isViewingSource.value === true ? 'Text' : 'HTML' }`
@@ -382,11 +385,14 @@ export default createComponent({
     }
 
     function onFocusout (e) {
+      const root = rootRef.value
+
       if (
-        rootRef.value.contains(e.target) === true
+        root !== null
+        && root.contains(e.target) === true
         && (
           e.relatedTarget === null
-          || rootRef.value.contains(e.relatedTarget) !== true
+          || root.contains(e.relatedTarget) !== true
         )
       ) {
         eVm.caret.savePosition()
@@ -394,27 +400,12 @@ export default createComponent({
       }
     }
 
-    function onMousedown () {
-      offsetBottom = void 0
-    }
-
-    function onMouseup (e) {
-      eVm.caret.save()
-      emit('mouseup', e)
-    }
-
-    function onTouchstartPassive () {
+    function onPointerStart () {
       offsetBottom = void 0
     }
 
-    function onKeyup (e) {
+    function onSelectionchange (e) {
       eVm.caret.save()
-      emit('keyup', e)
-    }
-
-    function onTouchend (e) {
-      eVm.caret.save()
-      emit('touchend', e)
     }
 
     function setContent (v, restorePosition) {
@@ -471,6 +462,12 @@ export default createComponent({
       eVm.caret = proxy.caret = new Caret(contentRef.value, eVm)
       setContent(props.modelValue)
       refreshToolbar()
+
+      document.addEventListener('selectionchange', onSelectionchange)
+    })
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('selectionchange', onSelectionchange)
     })
 
     return () => {
@@ -526,13 +523,8 @@ export default createComponent({
           onFocus,
 
           // clean saved scroll position
-          onMousedown,
-          onTouchstartPassive,
-
-          // save caret
-          onMouseup,
-          onKeyup,
-          onTouchend
+          onMousedown: onPointerStart,
+          onTouchstartPassive: onPointerStart
         })
       ])
     }

package/src/components/icon/QIcon.js

@@ -29,8 +29,15 @@ const matMap = {
   s_: '-sharp'
 }
 
+const symMap = {
+  sym_o_: '-outlined',
+  sym_r_: '-rounded',
+  sym_s_: '-sharp'
+}
+
 const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
 const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
+const symRE = new RegExp('^(' + Object.keys(symMap).join('|') + ')')
 const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
@@ -133,7 +140,23 @@ export default createComponent({
         cls = icon
       }
       else if (ionRE.test(icon) === true) {
-        cls = `ionicons ion-${ $q.platform.is.ios === true ? 'ios' : 'md' }${ icon.substr(3) }`
+        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
+        //
+        // Caution: To be able to add suffix to the class name,
+        // keep the 'material-symbols' at the end of the string.
+        cls = 'notranslate material-symbols'
+
+        const matches = icon.match(symRE)
+        if (matches !== null) {
+          icon = icon.substring(6)
+          cls += symMap[ matches[ 1 ] ]
+        }
+
+        content = icon
       }
       else {
         // "notranslate" class is for Google Translate
@@ -179,7 +202,7 @@ export default createComponent({
       if (type.value.svg === true) {
         return h('span', data, hMergeSlot(slots.default, [
           h('svg', {
-            viewBox: type.value.viewBox
+            viewBox: type.value.viewBox || '0 0 24 24'
           }, type.value.nodes)
         ]))
       }

package/src/components/icon/QIcon.sass

@@ -28,7 +28,10 @@
 .material-icons,
 .material-icons-outlined,
 .material-icons-round,
-.material-icons-sharp
+.material-icons-sharp,
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp
   user-select: none
   cursor: inherit
   font-size: inherit

package/src/components/img/QImg.js

@@ -31,6 +31,10 @@ export default createComponent({
       type: String,
       default: 'lazy'
     },
+    fetchpriority: {
+      type: String,
+      default: 'auto'
+    },
     width: String,
     height: String,
     initialRatio: {
@@ -193,6 +197,7 @@ export default createComponent({
         height: props.height,
         width: props.width,
         loading: props.loading,
+        fetchpriority: props.fetchpriority,
         'aria-hidden': 'true',
         draggable: props.draggable,
         ...img

package/src/components/img/QImg.json

@@ -116,8 +116,26 @@
     "referrerpolicy": {
       "type": "String",
       "desc": "Same syntax as <img> referrerpolicy attribute",
+      "values": [
+        "no-referrer",
+        "no-referrer-when-downgrade",
+        "origin",
+        "origin-when-cross-origin",
+        "same-origin",
+        "strict-origin",
+        "strict-origin-when-cross-origin",
+        "unsafe-url"
+      ],
+      "category": "behavior"
+    },
+
+    "fetchpriority": {
+      "type": "String",
+      "desc": "Provides a hint of the relative priority to use when fetching the image",
+      "default": "auto",
+      "values": [ "high", "low", "auto" ],
       "category": "behavior",
-      "__exemption": [ "examples" ]
+      "addedIn": "v2.6.6"
     },
 
     "fit": {

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

@@ -135,6 +135,16 @@ export default createComponent({
 
       if (isWorking.value === true) {
         localScrollTarget.addEventListener('scroll', poll, passive)
+
+        if (props.reverse === true) {
+          const
+            scrollHeight = getScrollHeight(localScrollTarget),
+            containerHeight = height(localScrollTarget)
+
+          setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight)
+        }
+
+        immediatePoll()
       }
     }
 
@@ -205,16 +215,6 @@ export default createComponent({
       setDebounce(props.debounce)
 
       updateScrollTarget()
-
-      if (props.reverse === true) {
-        const
-          scrollHeight = getScrollHeight(localScrollTarget),
-          containerHeight = height(localScrollTarget)
-
-        setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight)
-      }
-
-      immediatePoll()
     })
 
     return () => {

package/src/components/input/QInput.js

@@ -208,7 +208,7 @@ export default createComponent({
     }
 
     function onInput (e) {
-      if (!e || !e.target || e.target.composing === true) {
+      if (!e || !e.target || e.target.qComposing === true) {
         return
       }
 
@@ -253,6 +253,8 @@ export default createComponent({
         }
 
         if (props.modelValue !== val && emitCachedValue !== val) {
+          emitCachedValue = val
+
           stopWatcher === true && (stopValueWatcher = true)
           emit('update:modelValue', val)
 
@@ -284,13 +286,16 @@ export default createComponent({
       const inp = inputRef.value
       if (inp !== null) {
         const parentStyle = inp.parentNode.style
+        const { overflow } = inp.style
 
         // reset height of textarea to a small size to detect the real height
         // but keep the total control size the same
         parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
         inp.style.height = '1px'
+        inp.style.overflow = 'hidden'
 
         inp.style.height = inp.scrollHeight + 'px'
+        inp.style.overflow = overflow
         parentStyle.marginBottom = ''
       }
     }

package/src/components/item/QItem.js

@@ -20,7 +20,10 @@ export default createComponent({
       default: 'div'
     },
 
-    active: Boolean,
+    active: {
+      type: Boolean,
+      default: null
+    },
 
     clickable: Boolean,
     dense: Boolean,
@@ -58,7 +61,7 @@ export default createComponent({
       + (props.dense === true ? ' q-item--dense' : '')
       + (isDark.value === true ? ' q-item--dark' : '')
       + (
-        hasLink.value === true
+        hasLink.value === true && props.active === null
           ? linkClass.value
           : (
               props.active === true

package/src/components/item/QItem.json

@@ -9,7 +9,8 @@
     "active": {
       "type": "Boolean",
       "desc": "Put item into 'active' state",
-      "category": "state"
+      "category": "state",
+      "default": null
     },
 
     "dark": {

package/src/components/layout/QLayout.js

@@ -231,7 +231,8 @@ export default createComponent({
       const layout = h('div', {
         class: classes.value,
         style: style.value,
-        ref: props.container === true ? void 0 : rootRef
+        ref: props.container === true ? void 0 : rootRef,
+        tabindex: -1
       }, content)
 
       if (props.container === true) {

package/src/components/menu/QMenu.js

@@ -244,6 +244,7 @@ export default createComponent({
     function handleHide (evt) {
       removeTick()
       removeTimeout()
+      hidePortal()
 
       anchorCleanup(true)
 
@@ -261,7 +262,7 @@ export default createComponent({
       }
 
       registerTimeout(() => {
-        hidePortal()
+        hidePortal(true) // done hiding, now destroy
         emit('hide', evt)
       }, props.transitionDuration)
     }

package/src/components/radio/QRadio.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -64,7 +64,7 @@ export default createComponent({
     const rootRef = ref(null)
     const { refocusTargetEl, refocusTarget } = useRefocusTarget(props, rootRef)
 
-    const isTrue = computed(() => props.modelValue === props.val)
+    const isTrue = computed(() => toRaw(props.modelValue) === toRaw(props.val))
 
     const classes = computed(() =>
       'q-radio cursor-pointer no-outline row inline no-wrap items-center'

package/src/components/select/QSelect.js

@@ -165,7 +165,7 @@ export default createComponent({
 
     const virtualScrollItemSizeComputed = computed(() => (
       props.virtualScrollItemSize === void 0
-        ? (props.dense === true ? 24 : 48)
+        ? (props.optionsDense === true ? 24 : 48)
         : props.virtualScrollItemSize
     ))
 
@@ -1013,7 +1013,7 @@ export default createComponent({
     function onInput (e) {
       clearTimeout(inputTimer)
 
-      if (e && e.target && e.target.composing === true) {
+      if (e && e.target && e.target.qComposing === true) {
         return
       }
 

package/src/components/slider/use-slider.js

@@ -129,7 +129,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     && innerMin.value < innerMax.value
   ))
 
-  const decimals = computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length)
+  const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length)
   const step = computed(() => (props.step === 0 ? 1 : props.step))
   const tabindex = computed(() => (editable.value === true ? props.tabindex || 0 : -1))
 

package/src/components/table/QTable.js

@@ -978,7 +978,7 @@ export default createComponent({
 
           return h('div', {
             class: 'q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3'
-              + (scope.selected === true ? 'q-table__grid-item--selected' : '')
+              + (scope.selected === true ? ' q-table__grid-item--selected' : '')
           }, [
             h('div', data, child)
           ])

package/src/components/table/QTable.json

@@ -676,6 +676,7 @@
           "examples": [ 100, 200 ]
         }
       },
+      "syncable": true,
       "examples": [
         ":pagination=\"myInitialPagination\"",
         "v-model:pagination=\"myPagination\""
@@ -706,6 +707,7 @@
       "type": "Array",
       "desc": "Keeps the user selection array",
       "default": "[]",
+      "syncable": true,
       "examples": [
         "v-model:selected=\"selection\""
       ],
@@ -716,6 +718,7 @@
       "type": "Array",
       "desc": "Keeps the array with expanded rows keys",
       "default": "[]",
+      "syncable": true,
       "examples": [
         "v-model:expanded=\"expanded\""
       ],

package/src/components/tabs/QTabs.sass

@@ -181,9 +181,3 @@
       min-height: 36px
       &--full
         min-height: 52px
-
-
-@media (min-width: $breakpoint-lg-min)
-  .q-header, .q-footer
-    .q-tab__content
-      min-width: 128px

package/src/components/tooltip/QTooltip.js

@@ -175,11 +175,12 @@ export default createComponent({
     function handleHide (evt) {
       removeTick()
       removeTimeout()
+      hidePortal()
 
       anchorCleanup()
 
       registerTimeout(() => {
-        hidePortal()
+        hidePortal(true) // done hiding, now destroy
         emit('hide', evt)
       }, props.transitionDuration)
     }

package/src/components/tree/QTree.sass

@@ -101,10 +101,10 @@
   &__arrow,
   &__spinner
     font-size: 16px
+    margin-right: 4px
 
   &__arrow
     transition: transform .3s
-    margin-right: 4px
 
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg)

package/src/components/uploader/uploader-core.js

@@ -339,28 +339,32 @@ export function getRenderer (getPlugin) {
 
     return [
       h('div', {
-        class: 'q-uploader__header-content flex flex-center no-wrap q-gutter-xs'
+        class: 'q-uploader__header-content column'
       }, [
-        getBtn(state.queuedFiles.value.length > 0, 'removeQueue', removeQueuedFiles),
-        getBtn(state.uploadedFiles.value.length > 0, 'removeUploaded', removeUploadedFiles),
-
-        state.isUploading.value === true
-          ? h(QSpinner, { class: 'q-uploader__spinner' })
-          : null,
-
-        h('div', { class: 'col column justify-center' }, [
-          props.label !== void 0
-            ? h('div', { class: 'q-uploader__title' }, [ props.label ])
+        h('div', {
+          class: 'flex flex-center no-wrap q-gutter-xs'
+        }, [
+          getBtn(state.queuedFiles.value.length > 0, 'removeQueue', removeQueuedFiles),
+          getBtn(state.uploadedFiles.value.length > 0, 'removeUploaded', removeUploadedFiles),
+
+          state.isUploading.value === true
+            ? h(QSpinner, { class: 'q-uploader__spinner' })
             : null,
 
-          h('div', { class: 'q-uploader__subtitle' }, [
-            uploadSizeLabel.value + ' / ' + uploadProgressLabel.value
-          ])
-        ]),
+          h('div', { class: 'col column justify-center' }, [
+            props.label !== void 0
+              ? h('div', { class: 'q-uploader__title' }, [ props.label ])
+              : null,
+
+            h('div', { class: 'q-uploader__subtitle' }, [
+              uploadSizeLabel.value + ' / ' + uploadProgressLabel.value
+            ])
+          ]),
 
-        getBtn(canAddFiles.value, 'add'),
-        getBtn(props.hideUploadBtn === false && canUpload.value === true, 'upload', state.upload),
-        getBtn(state.isUploading.value, 'clear', state.abort)
+          getBtn(canAddFiles.value, 'add'),
+          getBtn(props.hideUploadBtn === false && canUpload.value === true, 'upload', state.upload),
+          getBtn(state.isUploading.value, 'clear', state.abort)
+        ])
       ])
     ]
   }