quasar 2.1.4 → 2.1.8

package/src/components/select/QSelect.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUpdate, onUpdated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, defineComponent, ref, computed, watch, onBeforeUpdate, onUpdated, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import QField from '../field/QField.js'
 import QIcon from '../icon/QIcon.js'
@@ -142,7 +142,7 @@ export default defineComponent({
     const dialogFieldFocused = ref(false)
     const innerLoadingIndicator = ref(false)
 
-    let inputTimer, innerValueCache, optionScopeCache,
+    let inputTimer, innerValueCache,
       hasDialog, userInputValue, filterId, defaultInputValue,
       transitionShowComputed, searchBuffer, searchBufferExp
 
@@ -268,17 +268,28 @@ export default defineComponent({
     const tabindex = computed(() => (state.focused.value === true ? props.tabindex : -1))
 
     const comboboxAttrs = computed(() => ({
+      tabindex: tabindex.value,
       role: 'combobox',
-      'aria-multiselectable': props.multiple === true ? 'true' : 'false',
+      'aria-label': props.label,
+      'aria-autocomplete': props.useInput === true ? 'list' : 'none',
       'aria-expanded': menu.value === true ? 'true' : 'false',
       'aria-owns': `${ state.targetUid.value }_lb`,
-      'aria-activedescendant': `${ state.targetUid.value }_${ optionIndex.value }`
+      'aria-controls': `${ state.targetUid.value }_lb`
     }))
 
-    const listboxAttrs = computed(() => ({
-      role: 'listbox',
-      id: `${ state.targetUid.value }_lb`
-    }))
+    const listboxAttrs = computed(() => {
+      const attrs = {
+        id: `${ state.targetUid.value }_lb`,
+        role: 'listbox',
+        'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+      }
+
+      if (optionIndex.value >= 0) {
+        attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`
+      }
+
+      return attrs
+    })
 
     const selectedScope = computed(() => {
       return innerValue.value.map((opt, i) => ({
@@ -298,7 +309,6 @@ export default defineComponent({
       }
 
       const { from, to } = virtualScrollSliceRange.value
-      const { options, optionEls } = optionScopeCache
 
       return props.options.slice(from, to).map((opt, i) => {
         const disable = isOptionDisabled.value(opt) === true
@@ -330,7 +340,7 @@ export default defineComponent({
           }
         }
 
-        const option = {
+        return {
           index,
           opt,
           html: needsHtmlFn.value(opt),
@@ -341,22 +351,6 @@ export default defineComponent({
           setOptionIndex,
           itemProps
         }
-
-        const optionWithoutEvents = {
-          ...option,
-          itemProps: {
-            ...itemProps,
-            onClick: void 0,
-            onMousemove: void 0
-          }
-        }
-
-        if (options[ i ] === void 0 || isDeepEqual(optionWithoutEvents, options[ i ]) !== true) {
-          options[ i ] = optionWithoutEvents
-          optionEls[ i ] = void 0
-        }
-
-        return option
       })
     })
 
@@ -938,14 +932,6 @@ export default defineComponent({
     }
 
     function getAllOptions () {
-      if (
-        slots.option !== void 0
-        && optionScopeCache.optionSlot !== slots.option
-      ) {
-        optionScopeCache.optionSlot = slots.option
-        optionScopeCache.optionEls = []
-      }
-
       const fn = slots.option !== void 0
         ? slots.option
         : scope => {
@@ -965,15 +951,7 @@ export default defineComponent({
           })
         }
 
-      const { optionEls } = optionScopeCache
-
-      let options = padVirtualScroll('div', optionScope.value.map((scope, i) => {
-        if (optionEls[ i ] === void 0) {
-          optionEls[ i ] = fn(scope)
-        }
-
-        return optionEls[ i ]
-      }))
+      let options = padVirtualScroll('div', optionScope.value.map(fn))
 
       if (slots[ 'before-options' ] !== void 0) {
         options = slots[ 'before-options' ]().concat(options)
@@ -991,16 +969,15 @@ export default defineComponent({
         value: inputValue.value !== void 0 ? inputValue.value : '',
         // required for Android in order to show ENTER key when in form
         type: 'search',
+        ...comboboxAttrs.value,
         ...state.splitAttrs.attributes.value,
         id: state.targetUid.value,
         maxlength: props.maxlength,
-        tabindex: props.tabindex,
         autocomplete: props.autocomplete,
         'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
         disabled: props.disable === true,
         readonly: props.readonly === true,
-        ...inputControlEvents.value,
-        ...comboboxAttrs.value
+        ...inputControlEvents.value
       }
 
       if (fromDialog !== true && hasDialog === true) {
@@ -1286,10 +1263,6 @@ export default defineComponent({
     }
 
     function closeMenu () {
-      if (optionScopeCache !== void 0) {
-        optionScopeCache.optionEls = []
-      }
-
       if (dialog.value === true) {
         return
       }
@@ -1405,16 +1378,7 @@ export default defineComponent({
 
     updatePreState()
 
-    onBeforeMount(() => {
-      optionScopeCache = {
-        optionSlot: slots.option,
-        options: [],
-        optionEls: []
-      }
-    })
-
     onBeforeUnmount(() => {
-      optionScopeCache = void 0
       clearTimeout(inputTimer)
     })
 
@@ -1502,7 +1466,6 @@ export default defineComponent({
               key: 'd_t',
               class: 'no-outline',
               id: state.targetUid.value,
-              tabindex: props.tabindex,
               ...comboboxAttrs.value,
               onKeydown: onTargetKeydown,
               onKeyup: onTargetKeyup,

package/src/components/select/QSelect.json

@@ -8,7 +8,7 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "Number", "String", "Array" ],
+      "type": [ "Number", "String", "Array", "null", "undefined" ],
       "desc": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "examples": [ "v-model=\"myModel\"" ]
     },

package/src/components/slider/QSlider.json

@@ -8,7 +8,7 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": "Number",
+      "type": [ "Number", "null", "undefined" ],
       "desc": "Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "examples": [ "v-model=\"positionModel\"" ]
     },
@@ -125,7 +125,12 @@
 
   "events": {
     "update:model-value": {
-      "extends": "update:model-value"
+      "extends": "update:model-value",
+      "params": {
+        "value": {
+          "type": [ "Number", "null" ]
+        }
+      }
     },
 
     "change": {

package/src/components/tabs/QTabs.js

@@ -9,6 +9,7 @@ import useTimeout from '../../composables/private/use-timeout.js'
 import { noop } from '../../utils/event.js'
 import { hSlot } from '../../utils/private/render.js'
 import { tabsKey } from '../../utils/private/symbols.js'
+import { rtlHasScrollBug } from '../../utils/private/rtl.js'
 
 function getIndicatorClass (color, top, vertical) {
   const pos = vertical === true
@@ -136,6 +137,11 @@ export default defineComponent({
         : { container: 'width', content: 'offsetWidth', scroll: 'scrollWidth' }
     ))
 
+    const isRTL = computed(() => props.vertical !== true && $q.lang.rtl === true)
+    const rtlPosCorrection = computed(() => rtlHasScrollBug === false && isRTL.value === true)
+
+    watch(isRTL, localUpdateArrows)
+
     watch(() => props.modelValue, name => {
       updateModel({ name, setCurrent: true, skipEmit: true })
     })
@@ -278,12 +284,18 @@ export default defineComponent({
       if (content !== null) {
         const
           rect = content.getBoundingClientRect(),
-          pos = props.vertical === true ? content.scrollTop : content.scrollLeft
+          pos = props.vertical === true ? content.scrollTop : Math.abs(content.scrollLeft)
 
-        leftArrow.value = pos > 0
-        rightArrow.value = props.vertical === true
-          ? Math.ceil(pos + rect.height) < content.scrollHeight
-          : Math.ceil(pos + rect.width) < content.scrollWidth
+        if (isRTL.value === true) {
+          leftArrow.value = Math.ceil(pos + rect.width) < content.scrollWidth - 1
+          rightArrow.value = pos > 0
+        }
+        else {
+          leftArrow.value = pos > 0
+          rightArrow.value = props.vertical === true
+            ? Math.ceil(pos + rect.height) < content.scrollHeight
+            : Math.ceil(pos + rect.width) < content.scrollWidth
+        }
       }
     }
 
@@ -292,33 +304,50 @@ export default defineComponent({
       scrollTowards(value)
 
       scrollTimer = setInterval(() => {
-        if (scrollTowards(value)) {
+        if (scrollTowards(value) === true) {
           stopAnimScroll()
         }
       }, 5)
     }
 
     function scrollToStart () {
-      animScrollTo(0)
+      animScrollTo(rtlPosCorrection.value === true ? 9999 : 0)
     }
 
     function scrollToEnd () {
-      animScrollTo(9999)
+      animScrollTo(rtlPosCorrection.value === true ? 0 : 9999)
     }
 
     function stopAnimScroll () {
       clearInterval(scrollTimer)
     }
 
+    // let's speed up execution of time-sensitive scrollTowards()
+    // with a computed variable by directly applying the minimal
+    // number of instructions on get/set functions
+    const posFn = computed(() => (
+      rtlPosCorrection.value === true
+        ? { get: content => Math.abs(content.scrollLeft), set: (content, pos) => { content.scrollLeft = -pos } }
+        : (
+            props.vertical === true
+              ? { get: content => content.scrollTop, set: (content, pos) => { content.scrollTop = pos } }
+              : { get: content => content.scrollLeft, set: (content, pos) => { content.scrollLeft = pos } }
+          )
+    ))
+
     function scrollTowards (value) {
-      const content = contentRef.value
+      const
+        content = contentRef.value,
+        { get, set } = posFn.value
+
       let
-        pos = props.vertical === true ? content.scrollTop : content.scrollLeft,
-        done = false
+        done = false,
+        pos = get(content)
 
       const direction = value < pos ? -1 : 1
 
       pos += direction * 5
+
       if (pos < 0) {
         done = true
         pos = 0
@@ -331,7 +360,7 @@ export default defineComponent({
         pos = value
       }
 
-      content[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] = pos
+      set(content, pos)
       localUpdateArrows()
 
       return done

package/src/components/tabs/QTabs.json

@@ -6,7 +6,7 @@
   "props": {
     "model-value":{
       "extends": "model-value",
-      "type": [ "Number", "String" ],
+      "type": [ "Number", "String", "null", "undefined" ],
       "desc": "Model of the component defining current panel name; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "required": false,
       "examples": [ "v-model=\"selectedTab\"" ]

package/src/components/time/QTime.json

@@ -8,7 +8,7 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": "String",
+      "type": [ "String", "null", "undefined" ],
       "desc": "Time of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "examples": [
         "v-model=\"currentTime\""
@@ -115,7 +115,7 @@
       "extends": "update:model-value",
       "params": {
         "value": {
-          "type": "String"
+          "type": [ "String", "null" ]
         },
         "details": {
           "type": "Object",

package/src/components/tooltip/QTooltip.js

@@ -286,7 +286,10 @@ export default defineComponent({
               'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
               attrs.class
             ],
-            style: transitionStyle.value,
+            style: [
+              attrs.style,
+              transitionStyle.value
+            ],
             role: 'complementary'
           }, hSlot(slots.default))
         : null

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

@@ -2,6 +2,7 @@ import { h, ref, computed, watch, onBeforeMount, onBeforeUnmount, nextTick, getC
 
 import debounce from '../../utils/debounce.js'
 import { noop } from '../../utils/event.js'
+import { rtlHasScrollBug } from '../../utils/private/rtl.js'
 
 const aggBucketSize = 1000
 
@@ -15,31 +16,6 @@ const scrollToEdges = [
 ]
 
 const slice = Array.prototype.slice
-
-let buggyRTL = void 0
-
-// mobile Chrome takes the crown for this
-if (!__QUASAR_SSR__) {
-  const scroller = document.createElement('div')
-  const spacer = document.createElement('div')
-
-  scroller.setAttribute('dir', 'rtl')
-  scroller.style.width = '1px'
-  scroller.style.height = '1px'
-  scroller.style.overflow = 'auto'
-
-  spacer.style.width = '1000px'
-  spacer.style.height = '1px'
-
-  document.body.appendChild(scroller)
-  scroller.appendChild(spacer)
-  scroller.scrollLeft = -1000
-
-  buggyRTL = scroller.scrollLeft >= 0
-
-  scroller.remove()
-}
-
 let id = 1
 
 const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.body).overflowAnchor === void 0
@@ -99,7 +75,7 @@ function getScrollDetails (
     details.scrollMaxSize = parentCalc.scrollWidth
 
     if (rtl === true) {
-      details.scrollStart = (buggyRTL === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart
+      details.scrollStart = (rtlHasScrollBug === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart
     }
   }
   else {
@@ -157,7 +133,7 @@ function setScroll (parent, scroll, horizontal, rtl) {
   if (parent === window) {
     if (horizontal === true) {
       if (rtl === true) {
-        scroll = (buggyRTL === true ? document.body.scrollWidth - window.innerWidth : 0) - scroll
+        scroll = (rtlHasScrollBug === true ? document.body.scrollWidth - window.innerWidth : 0) - scroll
       }
       window.scrollTo(scroll, window.pageYOffset || window.scrollY || document.body.scrollTop || 0)
     }
@@ -167,7 +143,7 @@ function setScroll (parent, scroll, horizontal, rtl) {
   }
   else if (horizontal === true) {
     if (rtl === true) {
-      scroll = (buggyRTL === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll
+      scroll = (rtlHasScrollBug === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll
     }
     parent.scrollLeft = scroll
   }

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

@@ -547,12 +547,10 @@ export default function (state) {
   return function renderField () {
     return h('label', {
       ref: state.rootRef,
-      class: state.inheritAttrs !== true
-        ? [
-            classes.value,
-            attrs.class
-          ]
-        : classes.value,
+      class: [
+        classes.value,
+        attrs.class
+      ],
       style: attrs.style,
       ...attributes.value
     }, [

package/src/plugins/Loading.json

@@ -45,8 +45,9 @@
         "desc": "Color name for background from the Quasar Color Palette"
       },
       "spinner": {
-        "type": "Component",
-        "desc": "One of the QSpinners"
+        "type": "String",
+        "desc": "One of the QSpinners",
+        "examples": [ "QSpinnerAudio" ]
       },
       "customClass": {
         "type": "String",

package/src/plugins/LoadingBar.js

@@ -39,6 +39,10 @@ export default defineReactivePlugin({
 
     const vm = createChildApp({
       name: 'LoadingBar',
+
+      // hide App from Vue devtools
+      devtools: { hide: true },
+
       setup: () => () => h(QAjaxBar, props.value)
     }, parentApp).mount(el)
 

package/src/plugins/Meta.js

@@ -191,17 +191,25 @@ function injectServerMeta (ssrContext) {
 
   const ctx = ssrContext._meta
 
-  ctx.htmlAttrs += Object.keys(data.htmlAttr)
-    .filter(htmlFilter)
-    .map(getAttr(data.htmlAttr))
-    .join(' ')
+  const htmlAttr = Object.keys(data.htmlAttr).filter(htmlFilter)
+
+  if (htmlAttr.length > 0) {
+    ctx.htmlAttrs += (
+      (ctx.htmlAttrs.length > 0 ? ' ' : '')
+      + htmlAttr.map(getAttr(data.htmlAttr)).join(' ')
+    )
+  }
 
   ctx.headTags += getHead(data)
 
-  ctx.bodyAttrs += Object.keys(data.bodyAttr)
-    .filter(bodyFilter)
-    .map(getAttr(data.bodyAttr))
-    .join(' ')
+  const bodyAttr = Object.keys(data.bodyAttr).filter(bodyFilter)
+
+  if (bodyAttr.length > 0) {
+    ctx.bodyAttrs += (
+      (ctx.bodyAttrs.length > 0 ? ' ' : '')
+      + bodyAttr.map(getAttr(data.bodyAttr)).join(' ')
+    )
+  }
 
   ctx.bodyTags += Object.keys(data.noscript)
     .map(name => `<noscript data-qmeta="${ name }">${ data.noscript[ name ] }</noscript>`)

package/src/plugins/Notify.js

@@ -64,6 +64,9 @@ function logError (error, config) {
 function getComponent ($q) {
   return defineComponent({
     name: 'QNotifications',
+    
+    // hide App from Vue devtools
+    devtools: { hide: true },
 
     setup () {
       const notificationsList = {}

package/src/utils/private/global-dialog.js

@@ -5,7 +5,8 @@ import { createGlobalNode, removeGlobalNode } from './global-nodes.js'
 
 const ssrAPI = {
   onOk: () => ssrAPI,
-  okCancel: () => ssrAPI,
+  onCancel: () => ssrAPI,
+  onDismiss: () => ssrAPI,
   hide: () => ssrAPI,
   update: () => ssrAPI
 }

package/src/utils/private/rtl.js

@@ -0,0 +1,27 @@
+let rtlHasScrollBug = false
+
+// mobile Chrome takes the crown for this
+if (!__QUASAR_SSR__) {
+  const scroller = document.createElement('div')
+  const spacer = document.createElement('div')
+
+  scroller.setAttribute('dir', 'rtl')
+  scroller.style.width = '1px'
+  scroller.style.height = '1px'
+  scroller.style.overflow = 'auto'
+
+  spacer.style.width = '1000px'
+  spacer.style.height = '1px'
+
+  document.body.appendChild(scroller)
+  scroller.appendChild(spacer)
+  scroller.scrollLeft = -1000
+
+  rtlHasScrollBug = scroller.scrollLeft >= 0
+
+  scroller.remove()
+}
+
+export {
+  rtlHasScrollBug
+}