quasar 2.3.4 → 2.4.0

package/src/components/table/QTable.js

@@ -23,6 +23,7 @@ import { useTableRowSelection, useTableRowSelectionProps, useTableRowSelectionEm
 import { useTableRowExpand, useTableRowExpandProps, useTableRowExpandEmits } from './table-row-expand.js'
 import { useTableColumnSelection, useTableColumnSelectionProps } from './table-column-selection.js'
 
+import { injectProp, injectMultipleProps } from '../../utils/private/inject-obj-prop.js'
 import { createComponent } from '../../utils/private/create.js'
 
 const bottomClass = 'q-table__bottom row items-center'
@@ -477,11 +478,7 @@ export default createComponent({
 
       data.cols = data.cols.map(col => {
         const c = { ...col }
-        Object.defineProperty(c, 'value', {
-          get: () => getCellValue(col, data.row),
-          configurable: true,
-          enumerable: true
-        })
+        injectProp(c, 'value', () => getCellValue(col, data.row))
         return c
       })
 
@@ -490,13 +487,7 @@ export default createComponent({
 
     function getBodyCellScope (data) {
       injectBodyCommonScope(data)
-
-      Object.defineProperty(data, 'value', {
-        get: () => getCellValue(data.col, data.row),
-        configurable: true,
-        enumerable: true
-      })
-
+      injectProp(data, 'value', () => getCellValue(data.col, data.row))
       return data
     }
 
@@ -516,23 +507,21 @@ export default createComponent({
         dense: props.dense
       })
 
-      hasSelectionMode.value === true && Object.defineProperty(data, 'selected', {
-        get: () => isRowSelected(data.key),
-        set: (adding, evt) => {
+      hasSelectionMode.value === true && injectProp(
+        data,
+        'selected',
+        () => isRowSelected(data.key),
+        (adding, evt) => {
           updateSelection([ data.key ], [ data.row ], adding, evt)
-        },
-        configurable: true,
-        enumerable: true
-      })
+        }
+      )
 
-      Object.defineProperty(data, 'expand', {
-        get: () => isRowExpanded(data.key),
-        set: adding => {
-          updateExpanded(data.key, adding)
-        },
-        configurable: true,
-        enumerable: true
-      })
+      injectProp(
+        data,
+        'expand',
+        () => isRowExpanded(data.key),
+        adding => { updateExpanded(data.key, adding) }
+      )
     }
 
     function getCellValue (col, row) {
@@ -704,12 +693,12 @@ export default createComponent({
       })
 
       if (multipleSelection.value === true) {
-        Object.defineProperty(data, 'selected', {
-          get: () => headerSelectedValue.value,
-          set: onMultipleSelectionSet,
-          configurable: true,
-          enumerable: true
-        })
+        injectProp(
+          data,
+          'selected',
+          () => headerSelectedValue.value,
+          onMultipleSelectionSet
+        )
       }
 
       return data
@@ -1024,19 +1013,10 @@ export default createComponent({
       getCellValue
     })
 
-    Object.defineProperty(vm.proxy, 'filteredSortedRows', {
-      get: () => filteredSortedRows.value,
-      enumerable: true
-    })
-
-    Object.defineProperty(vm.proxy, 'computedRows', {
-      get: () => computedRows.value,
-      enumerable: true
-    })
-
-    Object.defineProperty(vm.proxy, 'computedRowsNumber', {
-      get: () => computedRowsNumber.value,
-      enumerable: true
+    injectMultipleProps(vm.proxy, {
+      filteredSortedRows: () => filteredSortedRows.value,
+      computedRows: () => computedRows.value,
+      computedRowsNumber: () => computedRowsNumber.value
     })
 
     return () => {

package/src/components/tabs/QRouteTab.js

@@ -10,8 +10,7 @@ export default createComponent({
 
   props: {
     ...useRouterLinkProps,
-    ...useTabProps,
-    to: { required: true }
+    ...useTabProps
   },
 
   emits: useTabEmits,

package/src/components/tabs/QRouteTab.json

@@ -5,13 +5,6 @@
 
   "mixins": [ "components/tabs/QTab", "composables/private/use-router-link" ],
 
-  "props": {
-    "to": {
-      "required": true,
-      "category": "general"
-    }
-  },
-
   "events": {
     "click": {
       "desc": "Emitted when component is clicked (activated)",

package/src/components/tabs/QTabs.js

@@ -87,6 +87,7 @@ export default createComponent({
     )
 
     const tabList = []
+    const hasFocus = ref(false)
 
     let localFromRoute = false, animateTimer, scrollTimer, unwatchRoute
     let localUpdateArrows = arrowsEnabled.value === true
@@ -126,7 +127,7 @@ export default createComponent({
     )
 
     const innerClass = computed(() =>
-      'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar '
+      'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar relative-position '
       + alignClass.value
       + (props.contentClass !== void 0 ? ` ${ props.contentClass }` : '')
       + ($q.platform.is.mobile === true ? ' scroll' : '')
@@ -201,7 +202,7 @@ export default createComponent({
           contentRef.value[ domProps.value.scroll ],
           Array.prototype.reduce.call(
             contentRef.value.children,
-            (acc, el) => acc + el[ domProps.value.content ],
+            (acc, el) => acc + (el[ domProps.value.content ] || 0),
             0
           )
         ),
@@ -260,23 +261,27 @@ export default createComponent({
       }
 
       if (newTab && scrollable.value === true) {
-        const
-          { left, width, top, height } = contentRef.value.getBoundingClientRect(),
-          newPos = newTab.rootRef.value.getBoundingClientRect()
+        scrollToTabEl(newTab.rootRef.value)
+      }
+    }
 
-        let offset = props.vertical === true ? newPos.top - top : newPos.left - left
+    function scrollToTabEl (el) {
+      const
+        { left, width, top, height } = contentRef.value.getBoundingClientRect(),
+        newPos = el.getBoundingClientRect()
 
-        if (offset < 0) {
-          contentRef.value[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.floor(offset)
-          localUpdateArrows()
-          return
-        }
+      let offset = props.vertical === true ? newPos.top - top : newPos.left - left
 
-        offset += props.vertical === true ? newPos.height - height : newPos.width - width
-        if (offset > 0) {
-          contentRef.value[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.ceil(offset)
-          localUpdateArrows()
-        }
+      if (offset < 0) {
+        contentRef.value[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.floor(offset)
+        localUpdateArrows()
+        return
+      }
+
+      offset += props.vertical === true ? newPos.height - height : newPos.width - width
+      if (offset > 0) {
+        contentRef.value[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.ceil(offset)
+        localUpdateArrows()
       }
     }
 
@@ -312,17 +317,56 @@ export default createComponent({
     }
 
     function scrollToStart () {
-      animScrollTo(rtlPosCorrection.value === true ? 9999 : 0)
+      animScrollTo(rtlPosCorrection.value === true ? Number.MAX_SAFE_INTEGER : 0)
     }
 
     function scrollToEnd () {
-      animScrollTo(rtlPosCorrection.value === true ? 0 : 9999)
+      animScrollTo(rtlPosCorrection.value === true ? 0 : Number.MAX_SAFE_INTEGER)
     }
 
     function stopAnimScroll () {
       clearInterval(scrollTimer)
     }
 
+    function onKbdNavigate (keyCode, fromEl) {
+      const tabs = Array.prototype.filter.call(
+        contentRef.value.children,
+        el => el === fromEl || (el.matches && el.matches('.q-tab.q-focusable') === true)
+      )
+
+      const len = tabs.length
+      if (len === 0) { return }
+
+      if (keyCode === 36) { // Home
+        scrollToTabEl(tabs[ 0 ])
+        return true
+      }
+      if (keyCode === 35) { // End
+        scrollToTabEl(tabs[ len - 1 ])
+        return true
+      }
+
+      const dirPrev = (props.vertical === true && keyCode === 38 /* ArrowUp */)
+        || (props.vertical !== true && keyCode === 37 /* ArrowLeft */)
+
+      const dirNext = (props.vertical === true && keyCode === 40 /* ArrowDown */)
+        || (props.vertical !== true && keyCode === 39 /* ArrowRight */)
+
+      const dir = dirPrev === true ? -1 : (dirNext === true ? 1 : void 0)
+
+      if (dir !== void 0) {
+        const rtlDir = isRTL.value === true ? -1 : 1
+        const index = tabs.indexOf(fromEl) + dir * rtlDir
+
+        if (index >= 0 && index < len) {
+          scrollToTabEl(tabs[ index ])
+          tabs[ index ].focus({ preventScroll: true })
+        }
+
+        return true
+      }
+    }
+
     // 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
@@ -368,7 +412,7 @@ export default createComponent({
     }
 
     function getRouteList () {
-      return tabList.filter(tab => tab.routerProps !== void 0 && tab.routerProps.hasLink.value === true)
+      return tabList.filter(tab => tab.routerProps !== void 0 && tab.routerProps.hasRouterLink.value === true)
     }
 
     // do not use directly; use verifyRouteModel() instead
@@ -440,6 +484,9 @@ export default createComponent({
       }
     }
 
+    function onFocusin () { hasFocus.value = true }
+    function onFocusout () { hasFocus.value = false }
+
     function verifyRouteModel () {
       if ($tabs.avoidRouteWatcher !== true) {
         registerTimeout(updateActiveRoute)
@@ -485,6 +532,7 @@ export default createComponent({
     const $tabs = {
       currentModel,
       tabProps,
+      hasFocus,
 
       registerTab,
       unregisterTab,
@@ -492,6 +540,7 @@ export default createComponent({
       verifyRouteModel,
       updateModel,
       recalculateScroll,
+      onKbdNavigate,
 
       avoidRouteWatcher: false
     }
@@ -543,7 +592,9 @@ export default createComponent({
       return h('div', {
         ref: rootRef,
         class: classes.value,
-        role: 'tablist'
+        role: 'tablist',
+        onFocusin,
+        onFocusout
       }, child)
     }
   }

package/src/components/tabs/use-tab.js

@@ -1,16 +1,17 @@
-import { h, ref, computed, inject, onBeforeUnmount, onMounted, withDirectives } from 'vue'
+import { h, ref, computed, inject, onBeforeUnmount, onMounted, withDirectives, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
 import Ripple from '../../directives/Ripple.js'
 
 import { hMergeSlot } from '../../utils/private/render.js'
-import { isKeyCode } from '../../utils/private/key-composition.js'
+import { isKeyCode, shouldIgnoreKey } from '../../utils/private/key-composition.js'
 import { tabsKey } from '../../utils/private/symbols.js'
+import { stopAndPrevent } from '../../utils/event.js'
 
 let uid = 0
 
-export const useTabEmits = [ 'click', 'keyup' ]
+export const useTabEmits = [ 'click', 'keydown' ]
 
 export const useTabProps = {
   icon: String,
@@ -42,14 +43,19 @@ export default function (props, slots, emit, routerProps) {
     console.error('QTab/QRouteTab component needs to be child of QTabs')
   })
 
+  const { proxy } = getCurrentInstance()
+
   const blurTargetRef = ref(null)
   const rootRef = ref(null)
   const tabIndicatorRef = ref(null)
 
   const ripple = computed(() => (
-    props.disable === true
+    props.disable === true || props.ripple === false
       ? false
-      : props.ripple
+      : Object.assign(
+        { keyCodes: [ 13, 32 ], early: true },
+        props.ripple === true ? {} : props.ripple
+      )
   ))
 
   const isActive = computed(() => $tabs.currentModel.value === props.name)
@@ -79,7 +85,9 @@ export default function (props, slots, emit, routerProps) {
   )
 
   const tabIndex = computed(() => (
-    props.disable === true || isActive.value === true ? -1 : props.tabindex || 0
+    props.disable === true || $tabs.hasFocus.value === true
+      ? -1
+      : props.tabindex || 0
   ))
 
   function onClick (e, keyboard) {
@@ -89,12 +97,12 @@ export default function (props, slots, emit, routerProps) {
       let go
 
       if (routerProps !== void 0) {
-        if (routerProps.hasLink.value === true) {
+        if (routerProps.hasRouterLink.value === true) {
           go = () => {
             e.__qNavigate = true
             $tabs.avoidRouteWatcher = true
 
-            const res = routerProps.navigateToLink(e)
+            const res = routerProps.navigateToRouterLink(e)
 
             if (res === false) {
               $tabs.avoidRouteWatcher = false
@@ -123,9 +131,14 @@ export default function (props, slots, emit, routerProps) {
     }
   }
 
-  function onKeyup (e) {
-    isKeyCode(e, 13) === true && onClick(e, true)
-    emit('keyup', e)
+  function onKeydown (e) {
+    if (isKeyCode(e, [ 13, 32 ])) {
+      onClick(e, true)
+    }
+    else if (shouldIgnoreKey(e) !== true && e.keyCode >= 35 && e.keyCode <= 40) {
+      $tabs.onKbdNavigate(e.keyCode, proxy.$el) === true && stopAndPrevent(e)
+    }
+    emit('keydown', e)
   }
 
   function getContent () {
@@ -201,10 +214,10 @@ export default function (props, slots, emit, routerProps) {
       class: classes.value,
       tabindex: tabIndex.value,
       role: 'tab',
-      'aria-selected': isActive.value,
+      'aria-selected': isActive.value === true ? 'true' : 'false',
       'aria-disabled': props.disable === true ? 'true' : void 0,
       onClick,
-      onKeyup,
+      onKeydown,
       ...customData
     }
 

package/src/components/tree/QTree.js

@@ -13,6 +13,7 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
 
@@ -431,18 +432,19 @@ export default createComponent({
     function getSlotScope (node, meta, key) {
       const scope = { tree: proxy, node, key, color: props.color, dark: isDark.value }
 
-      Object.defineProperty(scope, 'expanded', {
-        get: () => { return meta.expanded },
-        set: val => { val !== meta.expanded && setExpanded(key, val) },
-        configurable: true,
-        enumerable: true
-      })
-      Object.defineProperty(scope, 'ticked', {
-        get: () => { return meta.ticked },
-        set: val => { val !== meta.ticked && setTicked([ key ], val) },
-        configurable: true,
-        enumerable: true
-      })
+      injectProp(
+        scope,
+        'expanded',
+        () => { return meta.expanded },
+        val => { val !== meta.expanded && setExpanded(key, val) }
+      )
+
+      injectProp(
+        scope,
+        'ticked',
+        () => { return meta.ticked },
+        val => { val !== meta.ticked && setTicked([ key ], val) }
+      )
 
       return scope
     }

package/src/components/uploader/QUploader.json

@@ -67,12 +67,24 @@
   "slots": {
     "header": {
       "desc": "Slot for custom header; Scope is the QUploader instance itself",
-      "__exemption": ["scope"]
+      "scope": {
+        "...self": {
+          "type": "Component",
+          "tsType": "QUploader",
+          "desc": "QUploader instance"
+        }
+      }
     },
 
     "list": {
       "desc": "Slot for custom list; Scope is the QUploader instance itself",
-      "__exemption": ["scope"]
+      "scope": {
+        "...self": {
+          "type": "Component",
+          "tsType": "QUploader",
+          "desc": "QUploader instance"
+        }
+      }
     }
   },
 

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

@@ -210,7 +210,7 @@ export function getRenderer (getPlugin) {
       removed.size += f.size
       removed.files.push(f)
 
-      f._img !== void 0 && window.URL.revokeObjectURL(f._img.src)
+      f.__img !== void 0 && window.URL.revokeObjectURL(f.__img.src)
 
       return false
     })
@@ -226,7 +226,7 @@ export function getRenderer (getPlugin) {
     if (props.disable) { return }
 
     if (file.__status === 'uploaded') {
-      state.uploadedFiles.value = state.uploadedFiles.value.filter(f => f.name !== file.name)
+      state.uploadedFiles.value = state.uploadedFiles.value.filter(f => f.__key !== file.__key)
     }
     else if (file.__status === 'uploading') {
       file.__abort()
@@ -236,21 +236,22 @@ export function getRenderer (getPlugin) {
     }
 
     state.files.value = state.files.value.filter(f => {
-      if (f.name !== file.name) {
+      if (f.__key !== file.__key) {
         return true
       }
 
-      f._img !== void 0 && window.URL.revokeObjectURL(f._img.src)
+      f.__img !== void 0 && window.URL.revokeObjectURL(f.__img.src)
 
       return false
     })
-    state.queuedFiles.value = state.queuedFiles.value.filter(f => f.name !== file.name)
+
+    state.queuedFiles.value = state.queuedFiles.value.filter(f => f.__key !== file.__key)
     emit('removed', [ file ])
   }
 
   function revokeImgURLs () {
     state.files.value.forEach(f => {
-      f._img !== void 0 && window.URL.revokeObjectURL(f._img.src)
+      f.__img !== void 0 && window.URL.revokeObjectURL(f.__img.src)
     })
   }
 
@@ -303,6 +304,7 @@ export function getRenderer (getPlugin) {
       let child = void 0
 
       if (icon === 'add') {
+        data.onClick = pickFiles
         child = renderInput
       }
       else {
@@ -324,6 +326,7 @@ export function getRenderer (getPlugin) {
       multiple: props.multiple === true ? 'multiple' : void 0,
       capture: props.capture,
       onMousedown: stop, // need to stop refocus from QBtn
+      onClick: pickFiles,
       onChange: addFilesToQueue
     })
   }
@@ -367,7 +370,7 @@ export function getRenderer (getPlugin) {
     }
 
     return state.files.value.map(file => h('div', {
-      key: file.name,
+      key: file.__key,
       class: 'q-uploader__file relative-position'
         + (props.noThumbnails !== true && file.__img !== void 0 ? ' q-uploader__file--img' : '')
         + (
@@ -441,11 +444,15 @@ export function getRenderer (getPlugin) {
       uploadProgressLabel: uploadProgressLabel.value
     }
 
-    Object.keys(state).forEach(key => {
+    for (const key in state) {
       acc[ key ] = isRef(state[ key ]) === true
         ? state[ key ].value
         : state[ key ]
-    })
+    }
+
+    // TODO: (Qv3) Put the QUploader instance under `ref`
+    // property for consistency and flexibility
+    // return { ref: { ...acc, ...publicMethods } }
     return { ...acc, ...publicMethods }
   })
 

package/src/components/virtual-scroll/QVirtualScroll.sass

@@ -4,6 +4,7 @@
 
   &__content
     outline: none
+    contain: content
 
     *
       overflow-anchor: none