quasar 2.4.2 → 2.4.3

package/src/components/tabs/QTabs.js

@@ -70,7 +70,8 @@ export default createComponent({
     const vm = getCurrentInstance()
     const { proxy: { $q } } = vm
 
-    const { registerTick, prepareTick } = useTick()
+    const { registerTick: registerScrollTick } = useTick()
+    const { registerTimeout: registerFocusTimeout, removeTimeout: removeFocusTimeout } = useTimeout()
     const { registerTimeout } = useTimeout()
 
     const rootRef = ref(null)
@@ -178,7 +179,7 @@ export default createComponent({
     }
 
     function recalculateScroll () {
-      registerTick(() => {
+      registerScrollTick(() => {
         if (vm.isDeactivated !== true && vm.isUnmounted !== true) {
           updateContainer({
             width: rootRef.value.offsetWidth,
@@ -186,8 +187,6 @@ export default createComponent({
           })
         }
       })
-
-      prepareTick()
     }
 
     function updateContainer (domSize) {
@@ -346,11 +345,8 @@ export default createComponent({
         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 dirPrev = keyCode === (props.vertical === true ? 38 /* ArrowUp */ : 37 /* ArrowLeft */)
+      const dirNext = keyCode === (props.vertical === true ? 40 /* ArrowDown */ : 39 /* ArrowRight */)
 
       const dir = dirPrev === true ? -1 : (dirNext === true ? 1 : void 0)
 
@@ -484,8 +480,28 @@ export default createComponent({
       }
     }
 
-    function onFocusin () { hasFocus.value = true }
-    function onFocusout () { hasFocus.value = false }
+    function onFocusin (e) {
+      removeFocusTimeout()
+
+      if (
+        hasFocus.value !== true
+        && rootRef.value !== null
+        && e.target
+        && typeof e.target.closest === 'function'
+      ) {
+        const tab = e.target.closest('.q-tab')
+
+        // if the target is contained by a QTab/QRouteTab
+        // (it might be other elements focused, like additional QBtn)
+        if (tab && rootRef.value.contains(tab) === true) {
+          hasFocus.value = true
+        }
+      }
+    }
+
+    function onFocusout () {
+      registerFocusTimeout(() => { hasFocus.value = false }, 30)
+    }
 
     function verifyRouteModel () {
       if ($tabs.avoidRouteWatcher !== true) {

package/src/components/tooltip/QTooltip.js

@@ -92,7 +92,7 @@ export default createComponent({
     const selfOrigin = computed(() => parsePosition(props.self, $q.lang.rtl))
     const hideOnRouteChange = computed(() => props.persistent !== true)
 
-    const { registerTick, removeTick, prepareTick } = useTick()
+    const { registerTick, removeTick } = useTick()
     const { registerTimeout, removeTimeout } = useTimeout()
     const { transition, transitionStyle } = useTransition(props, showing)
     const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
@@ -158,7 +158,6 @@ export default createComponent({
         updatePosition()
         configureScrollTarget()
       })
-      prepareTick()
 
       if (unwatchPosition === void 0) {
         unwatchPosition = watch(

package/src/components/video/QVideo.js

@@ -13,7 +13,9 @@ export default createComponent({
     src: {
       type: String,
       required: true
-    }
+    },
+
+    title: String
   },
 
   setup (props) {
@@ -30,6 +32,7 @@ export default createComponent({
     }, [
       h('iframe', {
         src: props.src,
+        title: props.title,
         frameborder: '0',
         allowfullscreen: true
       })

package/src/components/video/QVideo.json

@@ -11,9 +11,20 @@
       "desc": "The source url to display in an iframe",
       "required": true,
       "examples": [
-        "src=\"https://www.youtube.com/embed/k3_tw44QsZQ\""
+        "https://www.youtube.com/embed/k3_tw44QsZQ"
       ],
       "category": "model"
+    },
+
+    "title": {
+      "type": "String",
+      "desc": "(Accessibility) Set the native 'title' attribute value of the inner iframe being used",
+      "required": false,
+      "examples": [
+        "My Daily Marathon"
+      ],
+      "category": "accessibility",
+      "addedIn": "v2.4.3"
     }
   }
 }

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

@@ -263,26 +263,24 @@ export default function (state) {
     state.targetUid.value = getTargetUid(val)
   })
 
-  let focusFn
+  function focusHandler () {
+    const el = document.activeElement
+    let target = state.targetRef !== void 0 && state.targetRef.value
 
-  function focus () {
-    focusFn !== void 0 && removeFocusFn(focusFn)
-    focusFn = addFocusFn(() => {
-      focusFn = void 0
-      const el = document.activeElement
-      let target = state.targetRef !== void 0 && state.targetRef.value
-
-      if (target && (el === null || el.id !== state.targetUid.value)) {
-        target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'))
-        if (target && target !== el) {
-          target.focus()
-        }
+    if (target && (el === null || el.id !== state.targetUid.value)) {
+      target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'))
+      if (target && target !== el) {
+        target.focus()
       }
-    })
+    }
+  }
+
+  function focus () {
+    addFocusFn(focusHandler)
   }
 
   function blur () {
-    focusFn !== void 0 && removeFocusFn(focusFn)
+    removeFocusFn(focusHandler)
     const el = document.activeElement
     if (el !== null && state.rootRef.value.contains(el)) {
       el.blur()

package/src/composables/private/use-model-toggle.js

@@ -15,7 +15,7 @@ export const useModelToggleEmits = [
   'before-show', 'show', 'before-hide', 'hide'
 ]
 
-// handleShow/handleHide -> removeTick(), self (& emit show), prepareTick()
+// handleShow/handleHide -> removeTick(), self (& emit show)
 
 export default function ({
   showing,

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

@@ -48,16 +48,18 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
       return
     }
 
-    if (onGlobalDialog === false && portalEl === null) {
-      portalEl = createGlobalNode()
-    }
+    if (portalIsActive.value === false) {
+      if (onGlobalDialog === false && portalEl === null) {
+        portalEl = createGlobalNode()
+      }
 
-    portalIsActive.value = true
+      portalIsActive.value = true
 
-    // register portal
-    portalList.push(vm.proxy)
+      // register portal
+      portalList.push(vm.proxy)
 
-    addFocusWaitFlag(focusObj)
+      addFocusWaitFlag(focusObj)
+    }
   }
 
   function hidePortal () {

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

@@ -4,8 +4,6 @@ import { nextTick, onBeforeUnmount } from 'vue'
  * Usage:
  *    registerTick(fn)
  *    registerTick(fn)
- *    ....
- *    prepareTick()
  */
 
 export default function () {
@@ -18,22 +16,17 @@ export default function () {
   return {
     registerTick (fn) {
       tickFn = fn
+
+      nextTick(() => {
+        if (tickFn === fn) {
+          tickFn()
+          tickFn = void 0
+        }
+      })
     },
 
     removeTick () {
       tickFn = void 0
-    },
-
-    prepareTick () {
-      if (tickFn !== void 0) {
-        const fn = tickFn
-        nextTick(() => {
-          if (tickFn === fn) {
-            tickFn()
-            tickFn = void 0
-          }
-        })
-      }
     }
   }
 }

package/src/utils/clone.js

@@ -1,6 +1,55 @@
-export default function (data) {
-  const s = JSON.stringify(data)
-  if (s) {
-    return JSON.parse(s)
+// adapted from https://stackoverflow.com/a/40294058
+
+export default function cloneDeep (data, hash = new WeakMap()) {
+  if (Object(data) !== data) return data
+  if (hash.has(data)) return hash.get(data)
+
+  const result = data instanceof Date
+    ? new Date(data)
+    : (data instanceof RegExp
+        ? new RegExp(data.source, data.flags)
+        : (data instanceof Set
+            ? new Set()
+            : (data instanceof Map
+                ? new Map()
+                : (typeof data.constructor !== 'function'
+                    ? Object.create(null)
+                    : (data.prototype !== void 0 && typeof data.prototype.constructor === 'function'
+                        ? data
+                        : new data.constructor()
+                      )
+                  )
+              )
+          )
+      )
+
+  if (typeof data.constructor === 'function' && typeof data.valueOf === 'function') {
+    const val = data.valueOf()
+
+    if (Object(val) !== val) {
+      const result = new data.constructor(val)
+
+      hash.set(data, result)
+
+      return result
+    }
   }
+
+  hash.set(data, result)
+
+  if (data instanceof Set) {
+    data.forEach(val => {
+      result.add(cloneDeep(val, hash))
+    })
+  }
+  else if (data instanceof Map) {
+    data.forEach((val, key) => {
+      result.set(key, cloneDeep(val, hash))
+    })
+  }
+
+  return Object.assign(
+    result,
+    ...Object.keys(data).map(key => ({ [ key ]: cloneDeep(data[ key ], hash) }))
+  )
 }

package/src/utils/private/focus-manager.js

@@ -1,15 +1,17 @@
 let queue = []
-const waitFlags = []
+let waitFlags = []
+
+function clearFlag (flag) {
+  waitFlags = waitFlags.filter(entry => entry !== flag)
+}
 
 export function addFocusWaitFlag (flag) {
+  clearFlag(flag)
   waitFlags.push(flag)
 }
 
 export function removeFocusWaitFlag (flag) {
-  const index = waitFlags.indexOf(flag)
-  if (index !== -1) {
-    waitFlags.splice(index, 1)
-  }
+  clearFlag(flag)
 
   if (waitFlags.length === 0 && queue.length > 0) {
     // only call last focus handler (can't focus multiple things at once)
@@ -24,13 +26,9 @@ export function addFocusFn (fn) {
   }
   else {
     queue.push(fn)
-    return fn
   }
 }
 
 export function removeFocusFn (fn) {
-  const index = queue.indexOf(fn)
-  if (index !== -1) {
-    queue.splice(index, 1)
-  }
+  queue = queue.filter(entry => entry !== fn)
 }