quasar 2.3.1 → 2.4.0

package/src/components/table/table-pagination.js

@@ -64,6 +64,10 @@ export function useTablePaginationState (vm, getCellValue) {
     nextTick(() => {
       emit('request', {
         pagination: prop.pagination || computedPagination.value,
+        // FIXME: 'props.filter' is string/object, but 'prop.filter' can be controlled by the user, and the docs are suggesting 'prop.filter' is a function
+        // So, value of 'filter' becomes function/string/object, which makes a lot of things unpredictable and can break things
+        // Either update the docs to say 'prop.filter' should be a string/object, or use 'prop.filter || props.filterMethod' or maybe get 'computedFilterFunction' here and use that instead of 'props.filterMethod'
+        // The examples on our docs are using 'filter' as a string in onRequest handler, but the JSON API is saying 'filter' is a function
         filter: prop.filter || props.filter,
         getCellValue
       })

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/time/QTime.json

@@ -123,41 +123,49 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month",
               "__exemption": [ "examples" ]
             },
             "day": {
               "type": "Number",
+              "required": true,
               "desc": "The day of the month",
               "__exemption": [ "examples" ]
             },
             "hour": {
               "type": "Number",
+              "required": true,
               "desc": "The hour",
               "__exemption": [ "examples" ]
             },
             "minute": {
               "type": "Number",
+              "required": true,
               "desc": "The minute",
               "__exemption": [ "examples" ]
             },
             "second": {
               "type": "Number",
+              "required": true,
               "desc": "The second",
               "__exemption": [ "examples" ]
             },
             "millisecond": {
               "type": "Number",
+              "required": true,
               "desc": "The millisecond",
               "__exemption": [ "examples" ]
             },
             "changed": {
               "type": "Boolean",
+              "required": true,
               "desc": "Did the model change?"
             }
           }

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",
@@ -354,21 +354,25 @@
           "definition": {
             "node": {
               "type": "Object",
+              "required": true,
               "desc": "The node to which the new nodes (the children) will be appended",
               "__exemption": [ "examples" ]
             },
             "key": {
               "type": "String",
+              "required": true,
               "desc": "The key of the node getting the newly loaded child nodes",
               "examples": [ "New Node" ]
             },
             "done": {
               "type": "Function",
+              "required": true,
               "desc": "The callback to be carried out when the loading is successful",
               "params": {
                 "children": {
                   "type": "Array",
                   "desc": "Array of nodes",
+                  "default": "[]",
                   "__exemption": [ "examples" ]
                 }
               },
@@ -376,6 +380,7 @@
             },
             "fail": {
               "type": "Function",
+              "required": true,
               "desc": "The callback to be carried out should the loading fails",
               "params": null,
               "returns": null
@@ -422,8 +427,8 @@
       "params": {
         "key": {
           "type": "Any",
-          "desc": "The key of a node",
           "required": true,
+          "desc": "The key of a node",
           "examples": [ "Node 1" ]
         }
       },
@@ -457,8 +462,8 @@
       "params": {
         "key": {
           "type": "Any",
-          "desc": "The key of a node",
           "required": true,
+          "desc": "The key of a node",
           "examples": [ "Node 1" ]
         }
       },
@@ -481,14 +486,14 @@
       "params": {
         "key": {
           "type": "Any",
-          "desc": "The key of a node",
           "required": true,
+          "desc": "The key of a node",
           "examples": [ "Node 1" ]
         },
         "state": {
           "type": "Boolean",
-          "desc": "Set to 'true' to expand the branch of the tree, otherwise 'false' collapses it",
-          "required": true
+          "required": true,
+          "desc": "Set to 'true' to expand the branch of the tree, otherwise 'false' collapses it"
         }
       }
     },
@@ -498,8 +503,8 @@
       "params": {
         "key": {
           "type": "Any",
-          "desc": "The key of a node",
           "required": true,
+          "desc": "The key of a node",
           "examples": [ "Node 1" ]
         }
       },
@@ -514,14 +519,14 @@
       "params": {
         "keys": {
           "type": "Array",
-          "desc": "The keys of nodes to tick/untick",
           "required": true,
+          "desc": "The keys of nodes to tick/untick",
           "examples": [ "[ 'Node 1', 'Node 2' ]" ]
         },
         "state": {
           "type": "Boolean",
-          "desc": "Set to 'true' to tick the checkbox of nodes, otherwise 'false' unticks them",
-          "required": true
+          "required": true,
+          "desc": "Set to 'true' to tick the checkbox of nodes, otherwise 'false' unticks them"
         }
       }
     }

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