quasar 2.3.1 → 2.4.0

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/uploader/xhr-uploader-plugin.json

@@ -223,11 +223,13 @@
           "definition": {
             "files": {
               "type": "Array",
+              "required": true,
               "desc": "Uploaded files",
               "__exemption": [ "examples" ]
             },
             "xhr": {
               "type": "Object",
+              "required": true,
               "desc": "XMLHttpRequest that has been used to upload this batch of files",
               "__exemption": [ "examples" ]
             }
@@ -245,11 +247,13 @@
           "definition": {
             "files": {
               "type": "Array",
+              "required": true,
               "desc": "Files which encountered error",
               "__exemption": [ "examples" ]
             },
             "xhr": {
               "type": "Object",
+              "required": true,
               "desc": "XMLHttpRequest that has been used to upload this batch of files",
               "__exemption": [ "examples" ]
             }
@@ -267,11 +271,13 @@
           "definition": {
             "files": {
               "type": "Array",
+              "required": true,
               "desc": "Files which are now uploading",
               "__exemption": [ "examples" ]
             },
             "xhr": {
               "type": "Object",
+              "required": true,
               "desc": "XMLHttpRequest used for uploading",
               "__exemption": [ "examples" ]
             }
@@ -284,9 +290,8 @@
       "desc": "Emitted when factory function is supplied with a Promise which is rejected",
       "params": {
         "err": {
-          "type": "Object",
-          "desc": "Error Object which is the Promise rejection reason",
-          "__exemption": [ "examples" ]
+          "type": "Error",
+          "desc": "Error object which is the Promise rejection reason"
         },
         "files": {
           "type": "Array",

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

@@ -67,6 +67,21 @@
     }
   },
 
+  "events": {
+    "virtual-scroll": {
+      "params": {
+        "details": {
+          "definition": {
+            "ref": {
+              "tsType": "QVirtualScroll",
+              "desc": "Vue reference to the QVirtualScroll"
+            }
+          }
+        }
+      }
+    }
+  },
+
   "slots" : {
     "before": {
       "desc": "Template slot for the elements that should be rendered before the list; Suggestion: thead before a table"

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

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

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -15,8 +15,8 @@ const scrollToEdges = [
   'end-force'
 ]
 
-const slice = Array.prototype.slice
 let id = 1
+const filterProto = Array.prototype.filter
 
 const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.body).overflowAnchor === void 0
   ? noop
@@ -66,7 +66,7 @@ function getScrollDetails (
   if (horizontal === true) {
     if (parent === window) {
       details.scrollStart = window.pageXOffset || window.scrollX || document.body.scrollLeft || 0
-      details.scrollViewSize += window.innerWidth
+      details.scrollViewSize += document.documentElement.clientWidth
     }
     else {
       details.scrollStart = parentCalc.scrollLeft
@@ -81,7 +81,7 @@ function getScrollDetails (
   else {
     if (parent === window) {
       details.scrollStart = window.pageYOffset || window.scrollY || document.body.scrollTop || 0
-      details.scrollViewSize += window.innerHeight
+      details.scrollViewSize += document.documentElement.clientHeight
     }
     else {
       details.scrollStart = parentCalc.scrollTop
@@ -130,10 +130,16 @@ function getScrollDetails (
 }
 
 function setScroll (parent, scroll, horizontal, rtl) {
+  if (scroll === 'end') {
+    scroll = (parent === window ? document.body : parent)[
+      horizontal === true ? 'scrollWidth' : 'scrollHeight'
+    ]
+  }
+
   if (parent === window) {
     if (horizontal === true) {
       if (rtl === true) {
-        scroll = (rtlHasScrollBug === true ? document.body.scrollWidth - window.innerWidth : 0) - scroll
+        scroll = (rtlHasScrollBug === true ? document.body.scrollWidth - document.documentElement.clientWidth : 0) - scroll
       }
       window.scrollTo(scroll, window.pageYOffset || window.scrollY || document.body.scrollTop || 0)
     }
@@ -398,20 +404,17 @@ export function useVirtualScroll ({
     }
 
     const { activeElement } = document
+    const contentEl = contentRef.value
     if (
       rangeChanged === true
-      && contentRef.value !== null
-      && contentRef.value !== activeElement
-      && contentRef.value.contains(activeElement) === true
+      && contentEl !== null
+      && contentEl !== activeElement
+      && contentEl.contains(activeElement) === true
     ) {
-      const onBlurFn = () => {
-        contentRef.value.focus()
-      }
+      contentEl.addEventListener('focusout', onBlurRefocusFn)
 
-      activeElement.addEventListener('blur', onBlurFn, true)
-
-      requestAnimationFrame(() => {
-        activeElement.removeEventListener('blur', onBlurFn, true)
+      setTimeout(() => {
+        contentEl !== void 0 && contentEl.removeEventListener('focusout', onBlurRefocusFn)
       })
     }
 
@@ -489,8 +492,10 @@ export function useVirtualScroll ({
 
     if (contentEl) {
       const
-        children = slice.call(contentEl.children)
-          .filter(el => el.classList.contains('q-virtual-scroll--skip') === false),
+        children = filterProto.call(
+          contentEl.children,
+          el => el.classList && el.classList.contains('q-virtual-scroll--skip') === false
+        ),
         childrenLength = children.length,
         sizeFn = props.virtualScrollHorizontal === true
           ? el => el.getBoundingClientRect().width
@@ -521,6 +526,10 @@ export function useVirtualScroll ({
     }
   }
 
+  function onBlurRefocusFn () {
+    contentRef.value !== void 0 && contentRef.value.focus()
+  }
+
   function localResetVirtualScroll (toIndex, fullReset) {
     const defaultSize = 1 * virtualScrollItemSizeComputed.value
 
@@ -673,7 +682,10 @@ export function useVirtualScroll ({
   }
 
   setVirtualScrollSize()
-  const onVirtualScrollEvt = debounce(localOnVirtualScrollEvt, $q.platform.is.ios === true ? 120 : 35)
+  const onVirtualScrollEvt = debounce(
+    localOnVirtualScrollEvt,
+    $q.platform.is.ios === true ? 120 : 35
+  )
 
   onBeforeMount(() => {
     setVirtualScrollSize()
@@ -698,6 +710,7 @@ export function useVirtualScroll ({
   setOverflowAnchor !== noop && onBeforeUnmount(() => {
     const styleSheet = document.getElementById(vsId + '_ss')
     styleSheet !== null && styleSheet.remove()
+    onVirtualScrollEvt.cancel()
   })
 
   // expose public methods

package/src/components/virtual-scroll/use-virtual-scroll.json

@@ -72,30 +72,32 @@
           "definition": {
             "index": {
               "type": "Number",
+              "required": true,
               "desc": "Index of the list item that was scrolled into view (0 based)",
               "examples": [ 30 ]
             },
             "from": {
               "type": "Number",
+              "required": true,
               "desc": "The index of the first list item that is rendered (0 based)",
               "examples": [ 10 ]
             },
             "to": {
               "type": "Number",
+              "required": true,
               "desc": "The index of the last list item that is rendered (0 based)",
               "examples": [ 50 ]
             },
             "direction": {
               "type": "String",
+              "required": true,
               "desc": "Direction of change",
               "values": [ "increase", "decrease" ]
             },
             "ref": {
-              "type": "Object",
-              "desc": "Vue reference to the QVirtualList which triggered the event",
-              "__exemption": [
-                "examples"
-              ]
+              "type": "Component",
+              "required": true,
+              "desc": "Vue reference to the component which triggered the event"
             }
           }
         }

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

@@ -75,7 +75,7 @@ export const useFieldProps = {
 export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popup-show', 'popup-hide' ]
 
 export function useFieldState () {
-  const { props, attrs, proxy } = getCurrentInstance()
+  const { props, attrs, proxy, vnode } = getCurrentInstance()
 
   const isDark = useDark(props, proxy.$q)
 
@@ -90,7 +90,7 @@ export function useFieldState () {
     focused: ref(false),
     hasPopupOpen: false,
 
-    splitAttrs: useSplitAttrs(attrs),
+    splitAttrs: useSplitAttrs(attrs, vnode),
     targetUid: ref(getTargetUid(props.for)),
 
     rootRef: ref(null),
@@ -168,7 +168,7 @@ export default function (state) {
     isDirtyModel,
     hasRules,
     hasError,
-    computedErrorMessage,
+    errorMessage,
     resetValidation
   } = useValidate(state.focused, state.innerLoading)
 
@@ -348,7 +348,7 @@ export default function (state) {
     nextTick(() => {
       resetValidation()
 
-      if (props.lazyRules !== 'ondemand' && $q.platform.is.mobile !== true) {
+      if ($q.platform.is.mobile !== true) {
         isDirtyModel.value = false
       }
     })
@@ -473,9 +473,9 @@ export default function (state) {
     let msg, key
 
     if (hasError.value === true) {
-      if (computedErrorMessage.value !== null) {
-        msg = [ h('div', { role: 'alert' }, computedErrorMessage.value) ]
-        key = `q--slot-error-${ computedErrorMessage.value }`
+      if (errorMessage.value !== null) {
+        msg = [ h('div', { role: 'alert' }, errorMessage.value) ]
+        key = `q--slot-error-${ errorMessage.value }`
       }
       else {
         msg = hSlot(slots.error)

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

@@ -1,6 +1,6 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import { stopAndPrevent } from '../../utils/event.js'
+import { stop, stopAndPrevent } from '../../utils/event.js'
 
 function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
   const acceptedFiles = []
@@ -62,8 +62,18 @@ export default function ({
 
   function pickFiles (e) {
     if (editable.value) {
-      const input = getFileInput()
-      input && input.click(e)
+      if (e !== Object(e)) {
+        e = { target: null }
+      }
+
+      if (e.target !== null && e.target.matches('input[type="file"]') === true) {
+        // stop propagation if it's not a real pointer event
+        e.clientX === 0 && e.clientY === 0 && stop(e)
+      }
+      else {
+        const input = getFileInput()
+        input && input !== e.target && input.click(e)
+      }
     }
   }
 
@@ -112,10 +122,15 @@ export default function ({
       files = [ files[ 0 ] ]
     }
 
+    // Compute key to use for each file
+    files.forEach(file => {
+      file.__key = file.webkitRelativePath + file.lastModified + file.name + file.size
+    })
+
     // Avoid duplicate files
-    const filenameMap = currentFileList.map(entry => entry.name)
+    const filenameMap = currentFileList.map(entry => entry.__key)
     files = filterFiles(files, rejectedFiles, 'duplicate', file => {
-      return filenameMap.includes(file.name) === false
+      return filenameMap.includes(file.__key) === false
     })
 
     if (files.length === 0) { return done() }

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

@@ -12,13 +12,12 @@ export function useFormAttrs (props) {
   }))
 }
 
-export function useFormInject (formAttrs = {}, formDomProps = {}) {
+export function useFormInject (formAttrs = {}) {
   return (child, action, className) => {
     child[ action ](
       h('input', {
         class: 'hidden' + (className || ''),
-        ...formAttrs.value,
-        ...formDomProps.value
+        ...formAttrs.value
       })
     )
   }

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

@@ -3,6 +3,8 @@ import { ref, watch, onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstan
 import History from '../../history.js'
 import { vmHasRouter } from '../../utils/private/vm.js'
 
+let counter = 0
+
 export const useFullscreenProps = {
   fullscreen: Boolean,
   noRouteFullscreenExit: Boolean
@@ -50,7 +52,11 @@ export default function () {
     container = proxy.$el.parentNode
     container.replaceChild(fullscreenFillerNode, proxy.$el)
     document.body.appendChild(proxy.$el)
-    document.body.classList.add('q-body--fullscreen-mixin')
+
+    counter++
+    if (counter === 1) {
+      document.body.classList.add('q-body--fullscreen-mixin')
+    }
 
     historyEntry = {
       handler: exitFullscreen
@@ -69,11 +75,16 @@ export default function () {
     }
 
     container.replaceChild(proxy.$el, fullscreenFillerNode)
-    document.body.classList.remove('q-body--fullscreen-mixin')
     inFullscreen.value = false
 
-    if (proxy.$el.scrollIntoView !== void 0) {
-      setTimeout(() => { proxy.$el.scrollIntoView() })
+    counter = Math.max(0, counter - 1)
+
+    if (counter === 0) {
+      document.body.classList.remove('q-body--fullscreen-mixin')
+
+      if (proxy.$el.scrollIntoView !== void 0) {
+        setTimeout(() => { proxy.$el.scrollIntoView() })
+      }
     }
   }
 

package/src/composables/private/use-router-link.js

@@ -79,6 +79,7 @@ function isSameRouteLocationParams (a, b) {
 }
 
 export const useRouterLinkProps = {
+  // router-link
   to: [ String, Object ],
   replace: Boolean,
   exact: Boolean,
@@ -90,23 +91,33 @@ export const useRouterLinkProps = {
     type: String,
     default: 'q-router-link--exact-active'
   },
+
+  // regular <a> link
+  href: String,
+  target: String,
+
+  // state
   disable: Boolean
 }
 
-export default function () {
+// external props: type, tag
+
+export default function (fallbackTag) {
   const vm = getCurrentInstance()
-  const { props, attrs, proxy } = vm
+  const { props, proxy } = vm
 
   const hasRouter = vmHasRouter(vm)
+  const hasHrefLink = computed(() => props.disable !== true && props.href !== void 0)
 
-  const hasLinkConfigured = computed(() =>
+  const hasRouterLinkProps = computed(() =>
     hasRouter === true
     && props.disable !== true
+    && hasHrefLink.value !== true
     && props.to !== void 0 && props.to !== null && props.to !== ''
   )
 
   const linkRoute = computed(() => {
-    if (hasLinkConfigured.value === true) {
+    if (hasRouterLinkProps.value === true) {
       try { return proxy.$router.resolve(props.to) }
       catch (err) {}
     }
@@ -114,16 +125,33 @@ export default function () {
     return null
   })
 
-  const hasLink = computed(() => linkRoute.value !== null)
+  const hasRouterLink = computed(() => linkRoute.value !== null)
+  const hasLink = computed(() => hasHrefLink.value === true || hasRouterLink.value === true)
 
   const linkTag = computed(() => (
-    hasLink.value === true
+    props.type === 'a' || hasLink.value === true
       ? 'a'
-      : (props.tag || 'div')
+      : (props.tag || fallbackTag || 'div')
+  ))
+
+  const linkProps = computed(() => (
+    hasHrefLink.value === true
+      ? {
+          href: props.href,
+          target: props.target
+        }
+      : (
+          hasRouterLink.value === true
+            ? {
+                href: linkRoute.value.href,
+                target: props.target
+              }
+            : {}
+        )
   ))
 
   const linkActiveIndex = computed(() => {
-    if (hasLink.value === false) {
+    if (hasRouterLink.value === false) {
       return null
     }
 
@@ -170,7 +198,7 @@ export default function () {
   })
 
   const linkIsActive = computed(() =>
-    hasLink.value === true
+    hasRouterLink.value === true
     && linkActiveIndex.value > -1
     && includesParams(proxy.$route.params, linkRoute.value.params)
   )
@@ -182,7 +210,7 @@ export default function () {
   )
 
   const linkClass = computed(() => (
-    hasLink.value === true
+    hasRouterLink.value === true
       ? (
           linkIsExactActive.value === true
             ? ` ${ props.exactActiveClass } ${ props.activeClass }`
@@ -195,18 +223,8 @@ export default function () {
       : ''
   ))
 
-  const linkProps = computed(() => (
-    hasLink.value === true
-      ? {
-          href: linkRoute.value.href,
-          target: attrs.target,
-          role: 'link'
-        }
-      : {}
-  ))
-
   // should match RouterLink from Vue Router
-  function navigateToLink (e) {
+  function navigateToRouterLink (e) {
     if (
       // component is not disabled
       props.disable === true
@@ -222,7 +240,7 @@ export default function () {
       || (e.button !== undefined && e.button !== 0)
 
       // don't redirect if it should open in a new window
-      || attrs.target === '_blank'
+      || props.target === '_blank'
     ) {
       return false
     }
@@ -234,7 +252,10 @@ export default function () {
   }
 
   return {
+    hasRouterLink,
+    hasHrefLink,
     hasLink,
+
     linkTag,
     linkRoute,
     linkIsActive,
@@ -242,6 +263,6 @@ export default function () {
     linkClass,
     linkProps,
 
-    navigateToLink
+    navigateToRouterLink
   }
 }