quasar 2.4.0 → 2.4.4

package/src/components/slider/use-slider.js

@@ -142,7 +142,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   const positionProp = computed(() => (
     props.vertical === true
       ? (isReversed.value === true ? 'bottom' : 'top')
-      : isReversed.value === true ? 'right' : 'left'
+      : (isReversed.value === true ? 'right' : 'left')
   ))
 
   const sizeProp = computed(() => (props.vertical === true ? 'height' : 'width'))
@@ -152,8 +152,8 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
   const attributes = computed(() => {
     const acc = {
       role: 'slider',
-      'aria-valuemin': props.min,
-      'aria-valuemax': props.max,
+      'aria-valuemin': innerMin.value,
+      'aria-valuemax': innerMax.value,
       'aria-orientation': orientation.value,
       'data-step': props.step
     }
@@ -344,15 +344,19 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       })
     }
 
+    const filterFn = ({ value }) => value >= props.min && value <= props.max
+
     if (Array.isArray(def) === true) {
-      return def.map(item => (Object(item) === item ? item : { value: item }))
+      return def
+        .map(item => (Object(item) === item ? item : { value: item }))
+        .filter(filterFn)
     }
 
     return Object.keys(def).map(key => {
       const item = def[ key ]
       const value = Number(key)
       return Object(item) === item ? { ...item, value } : { value, label: item }
-    })
+    }).filter(filterFn)
   }
 
   function getMarkerLabelStyle (val) {
@@ -407,6 +411,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
         emit('pan', 'end')
       }
       active.value = false
+      focus.value = false
     }
     else if (event.isFirst === true) {
       dragging.value = getDragging(event.evt)
@@ -467,7 +472,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
 
   function getThumbRenderFn (thumb) {
     const focusClass = computed(() => (
-      preventFocus.value === false && focus.value === thumb.focusValue
+      preventFocus.value === false && (focus.value === thumb.focusValue || focus.value === 'both')
         ? ' q-slider--focus'
         : ''
     ))
@@ -482,9 +487,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       width: props.thumbSize,
       height: props.thumbSize,
       [ positionProp.value ]: `${ 100 * thumb.ratio.value }%`,
-      'z-index': thumb.nextFocus !== void 0
-        ? thumb.nextFocus.value === 'min' ? 2 : void 0
-        : void 0
+      zIndex: focus.value === thumb.focusValue ? 2 : void 0
     }))
 
     const pinColor = computed(() => (
@@ -540,12 +543,12 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       return h('div', {
         class: classes.value,
         style: style.value,
-        ...(thumb.getNodeData !== void 0 ? thumb.getNodeData() : {})
+        ...thumb.getNodeData()
       }, thumbContent)
     }
   }
 
-  function getContent (selectionBarStyle, events, injectThumb) {
+  function getContent (selectionBarStyle, trackContainerTabindex, trackContainerEvents, injectThumb) {
     const trackContent = []
 
     props.innerTrackColor !== 'transparent' && trackContent.push(
@@ -580,15 +583,14 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
         {
           key: 'trackC',
           class: trackContainerClass.value,
-          tabindex: tabindex.value,
-          ...events.value
+          tabindex: trackContainerTabindex.value,
+          ...trackContainerEvents.value
         },
         [
           h('div', {
             class: trackClass.value,
             style: trackStyle.value
-          },
-          trackContent)
+          }, trackContent)
         ],
         'slide',
         editable.value, () => panDirective.value
@@ -635,7 +637,8 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
       innerMax,
       innerMaxRatio,
       positionProp,
-      sizeProp
+      sizeProp,
+      isReversed
     },
 
     methods: {

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/timeline/QTimeline.sass

@@ -20,7 +20,7 @@
   &__subtitle
     font-size: 12px
     margin-bottom: 8px
-    opacity: .4
+    opacity: .6
     text-transform: uppercase
     letter-spacing: 1px
     font-weight: 700
@@ -240,4 +240,3 @@
 
       &__subtitle, &__content
         width: 50%
-

package/src/components/timeline/QTimelineEntry.json

@@ -34,7 +34,7 @@
       "desc": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/my-bg.png\"",
+        "(public folder) src=\"img/my-bg.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""

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/css/variables.sass

@@ -39,20 +39,18 @@ $flex-gutter: ('none': 0, 'xs': $flex-gutter-xs, 'sm': $flex-gutter-sm, 'md': $f
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $sizes: ('xs': 0, 'sm': ($breakpoint-xs + 1), 'md': ($breakpoint-sm + 1), 'lg': ($breakpoint-md + 1), 'xl': ($breakpoint-lg + 1)) !default
 
-$breakpoint-xs-min: 0 !default
-$breakpoint-xs-max: $breakpoint-xs !default
+$breakpoint-xs-max: (map-get($sizes, "sm") - 0.02) !default
 
 $breakpoint-sm-min: map-get($sizes, "sm") !default
-$breakpoint-sm-max: $breakpoint-sm !default
+$breakpoint-sm-max: (map-get($sizes, "md") - 0.02) !default
 
 $breakpoint-md-min: map-get($sizes, "md") !default
-$breakpoint-md-max: $breakpoint-md !default
+$breakpoint-md-max: (map-get($sizes, "lg") - 0.02) !default
 
 $breakpoint-lg-min: map-get($sizes, "lg") !default
-$breakpoint-lg-max: $breakpoint-lg !default
+$breakpoint-lg-max: (map-get($sizes, "xl") - 0.02) !default
 
 $breakpoint-xl-min: map-get($sizes, "xl") !default
-$breakpoint-xl-max: 9999px !default
 
 $h1:        (size: 6rem,     line-height: 6rem,     letter-spacing: -.01562em, weight: 300) !default
 $h2:        (size: 3.75rem,  line-height: 3.75rem,  letter-spacing: -.00833em, weight: 300) !default

package/src/plugins/BottomSheet.json

@@ -45,7 +45,7 @@
                   "type": "String",
                   "desc": "Path to an image for this action",
                   "examples": [
-                    "(statics folder) statics/img/something.png",
+                    "(public folder) img/something.png",
                     "(relative path format) :src=\"require('./my_img.jpg')\"",
                     "(URL) https://some-site.net/some-img.gif"
                   ]
@@ -60,6 +60,12 @@
                   "type": [ "String", "Number" ],
                   "desc": "Action label",
                   "examples": [ "Facebook" ]
+                },
+
+                "...": {
+                  "type": "Any",
+                  "desc": "Any other custom props",
+                  "__exemption": [ "examples" ]
                 }
               }
             },

package/src/plugins/Notify.json

@@ -45,9 +45,9 @@
 
       "avatar": {
         "type": "String",
-        "desc": "URL to an avatar/image; Suggestion: use statics folder",
+        "desc": "URL to an avatar/image; Suggestion: use public folder",
         "examples": [
-          "(statics folder) statics/img/something.png",
+          "(public folder) img/something.png",
           "(relative path format) require('./my_img.jpg')",
           "(URL) https://some-site.net/some-img.gif"
         ]
@@ -204,9 +204,9 @@
 
             "avatar": {
               "type": "String",
-              "desc": "URL to an avatar/image; Suggestion: use statics folder",
+              "desc": "URL to an avatar/image; Suggestion: public folder",
               "examples": [
-                "(statics folder) statics/img/something.png",
+                "(public folder) img/something.png",
                 "(relative path format) require('./my_img.jpg')",
                 "(URL) https://some-site.net/some-img.gif"
               ]
@@ -258,7 +258,7 @@
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
-                ":content-style=\"{ backgroundColor: '#ff0000' }\""
+                "{ backgroundColor: '#ff0000' }"
               ]
             },
             "badgeClass": {
@@ -266,7 +266,7 @@
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -279,7 +279,7 @@
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -387,9 +387,9 @@
 
               "avatar": {
                 "type": "String",
-                "desc": "URL to an avatar/image; Suggestion: use statics folder",
+                "desc": "URL to an avatar/image; Suggestion: use public folder",
                 "examples": [
-                  "(statics folder) statics/img/something.png",
+                  "(public folder) img/something.png",
                   "(relative path format) require('./my_img.jpg')",
                   "(URL) https://some-site.net/some-img.gif"
                 ]
@@ -410,7 +410,7 @@
                 "desc": "Class definitions to be attributed to the progress bar",
                 "examples": [
                   "my-special-class",
-                  ":content-class=\"{ 'my-special-class': <condition> }\""
+                  "{ 'my-special-class': <condition> }"
                 ]
               },
 
@@ -521,13 +521,13 @@
 
             "avatar": {
               "type": "String",
-              "desc": "URL to an avatar/image; Suggestion: use statics folder",
+              "desc": "URL to an avatar/image; Suggestion: use public folder",
               "examples": [
-                "(statics folder) statics/img/something.png",
+                "(public folder) img/something.png",
                 "(relative path format) require('./my_img.jpg')",
                 "(URL) https://some-site.net/some-img.gif"
               ]
-            },
+          },
 
             "spinner": {
               "type": [ "Boolean", "Component" ],
@@ -570,7 +570,7 @@
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
-                ":content-style=\"{ backgroundColor: '#ff0000' }\""
+                "{ backgroundColor: '#ff0000' }"
               ]
             },
             "badgeClass": {
@@ -578,7 +578,7 @@
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -591,7 +591,7 @@
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -701,13 +701,13 @@
 
             "avatar": {
               "type": "String",
-              "desc": "URL to an avatar/image; Suggestion: use statics folder",
+              "desc": "URL to an avatar/image; Suggestion: use public folder",
               "examples": [
-                "(statics folder) statics/img/something.png",
+                "(public folder) img/something.png",
                 "(relative path format) require('./my_img.jpg')",
                 "(URL) https://some-site.net/some-img.gif"
               ]
-            },
+          },
 
             "spinner": {
               "type": [ "Boolean", "Component" ],
@@ -750,7 +750,7 @@
               "desc": "Style definitions to be attributed to the badge",
               "examples": [
                 "background-color: #ff0000",
-                ":content-style=\"{ backgroundColor: '#ff0000' }\""
+                "{ backgroundColor: '#ff0000' }"
               ]
             },
             "badgeClass": {
@@ -758,7 +758,7 @@
               "desc": "Class definitions to be attributed to the badge",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 
@@ -771,7 +771,7 @@
               "desc": "Class definitions to be attributed to the progress bar",
               "examples": [
                 "my-special-class",
-                ":content-class=\"{ 'my-special-class': <condition> }\""
+                "{ 'my-special-class': <condition> }"
               ]
             },
 

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) }))
+  )
 }