quasar 2.3.3 → 2.4.2

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) {
@@ -562,7 +551,7 @@ export default createComponent({
         topSelection = slots[ 'top-selection' ],
         hasSelection = hasSelectionMode.value === true
           && topSelection !== void 0
-          && rowsSelectedNumber.vaue > 0,
+          && rowsSelectedNumber.value > 0,
         topClass = 'q-table__top relative-position row items-center'
 
       if (top !== void 0) {
@@ -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/tree/QTree.json

@@ -186,9 +186,9 @@
           "reactive": true
         },
         "tree": {
-          "type": "Object",
-          "desc": "QTree instance",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QTree",
+          "desc": "QTree instance"
         },
         "node": {
           "type": "Object",
@@ -226,9 +226,9 @@
           "reactive": true
         },
         "tree": {
-          "type": "Object",
-          "desc": "QTree instance",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QTree",
+          "desc": "QTree instance"
         },
         "node": {
           "type": "Object",
@@ -266,9 +266,9 @@
           "reactive": true
         },
         "tree": {
-          "type": "Object",
-          "desc": "QTree instance",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QTree",
+          "desc": "QTree instance"
         },
         "node": {
           "type": "Object",
@@ -306,9 +306,9 @@
           "reactive": true
         },
         "tree": {
-          "type": "Object",
-          "desc": "QTree instance",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QTree",
+          "desc": "QTree instance"
         },
         "node": {
           "type": "Object",

package/src/components/tree/QTree.sass

@@ -130,47 +130,51 @@
     .q-tree__node-body:after
       display: none !important
 
-  &--dense .q-tree
-    &__arrow,
-    &__spinner
-      margin-right: 1px
-
-    &__img
-      height: 32px
-
-    &__tickbox
-      margin-right: 3px
-
-    &__node
-      padding: 0
-      &:after
-        top: 0
-        left: -8px
-
-    &__node-header
-      margin-top: 0
-      padding: 1px
-      &:before
-        top: 0
-        left: -8px
-        width: 8px
-
-    &__node--child
-      padding-left: 17px
-      > .q-tree__node-header:before
-        left: -25px
-        width: 21px
-
-    &__node-body
-      padding: 0 0 2px
-
-    &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
-      padding: 0 0 2px 20px
-      &:after
-        left: 8px
-
-    &__children
-      padding-left: 16px
+  &--dense
+    > .q-tree__node--child > .q-tree__node-header
+      padding-left: 1px
+
+    .q-tree
+      &__arrow,
+      &__spinner
+        margin-right: 1px
+
+      &__img
+        height: 32px
+
+      &__tickbox
+        margin-right: 3px
+
+      &__node
+        padding: 0
+        &:after
+          top: 0
+          left: -8px
+
+      &__node-header
+        margin-top: 0
+        padding: 1px
+        &:before
+          top: 0
+          left: -8px
+          width: 8px
+
+      &__node--child
+        padding-left: 17px
+        > .q-tree__node-header:before
+          left: -25px
+          width: 21px
+
+      &__node-body
+        padding: 0 0 2px
+
+      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
+        padding: 0 0 2px 20px
+        &:after
+          left: 8px
+
+      &__children
+        padding-left: 16px
 
 [dir=rtl]
   .q-tree__arrow

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"
+        }
+      }
     }
   },