quasar 2.2.3 → 2.3.2

package/src/components/tabs/QRouteTab.json

@@ -24,29 +24,7 @@
         "navigateFn": {
           "type": "Function",
           "desc": "When you need to control the time at which the tab should trigger the route navigation then set 'evt.navigate' to false and call this function; Useful if you have async work to be done before the actual route navigation",
-          "params": {
-            "to": {
-              "type": [ "String", "Object" ],
-              "desc": "Equivalent to Vue Router <router-link> 'to' property",
-              "examples": [
-                "/home/dashboard",
-                "{ name: 'my-route-name' }"
-              ],
-              "default": "Tab's 'to' property"
-            },
-
-            "append": {
-              "type": "Boolean",
-              "desc": "Equivalent to Vue Router <router-link> 'append' property",
-              "default": "Tab's 'append' property"
-            },
-
-            "replace": {
-              "type": "Boolean",
-              "desc": "Equivalent to Vue Router <router-link> 'replace' property",
-              "default": "Tab's 'replace' property"
-            }
-          },
+          "params": null,
           "returns": null
         }
       }

package/src/components/tabs/QTabs.js

@@ -63,7 +63,7 @@ export default createComponent({
 
     contentClass: String,
 
-    'onUpdate:modelValue': Function
+    'onUpdate:modelValue': [ Function, Array ]
   },
 
   setup (props, { slots, emit }) {

package/src/components/time/QTime.js

@@ -659,21 +659,22 @@ export default createComponent({
     function setHour (hour) {
       if (innerModel.value.hour !== hour) {
         innerModel.value.hour = hour
-        innerModel.value.minute = null
-        innerModel.value.second = null
+        verifyAndUpdate()
       }
     }
 
     function setMinute (minute) {
       if (innerModel.value.minute !== minute) {
         innerModel.value.minute = minute
-        innerModel.value.second = null
-        props.withSeconds !== true && updateValue({ minute })
+        verifyAndUpdate()
       }
     }
 
     function setSecond (second) {
-      innerModel.value.second !== second && updateValue({ second })
+      if (innerModel.value.second !== second) {
+        innerModel.value.second = second
+        verifyAndUpdate()
+      }
     }
 
     const setModel = {

package/src/components/tree/QTree.js

@@ -14,6 +14,8 @@ import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
 
+const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
+
 export default createComponent({
   name: 'QTree',
 
@@ -37,6 +39,8 @@ export default createComponent({
       default: 'children'
     },
 
+    dense: Boolean,
+
     color: String,
     controlColor: String,
     textColor: String,
@@ -47,7 +51,7 @@ export default createComponent({
     tickStrategy: {
       type: String,
       default: 'none',
-      validator: v => [ 'none', 'strict', 'leaf', 'leaf-filtered' ].includes(v)
+      validator: v => tickStrategyOptions.includes(v)
     },
     ticked: Array, // v-model:ticked
     expanded: Array, // v-model:expanded
@@ -92,7 +96,7 @@ export default createComponent({
     })
 
     const classes = computed(() =>
-      'q-tree'
+      `q-tree q-tree--${ props.dense === true ? 'dense' : 'standard' }`
       + (props.noConnectors === true ? ' q-tree--no-connectors' : '')
       + (isDark.value === true ? ' q-tree--dark' : '')
       + (props.color !== void 0 ? ` text-${ props.color }` : '')
@@ -534,13 +538,13 @@ export default createComponent({
 
           m.lazy === 'loading'
             ? h(QSpinner, {
-                class: 'q-tree__spinner q-mr-xs',
+                class: 'q-tree__spinner',
                 color: computedControlColor.value
               })
             : (
                 isParent === true
                   ? h(QIcon, {
-                      class: 'q-tree__arrow q-mr-xs'
+                      class: 'q-tree__arrow'
                     + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
                       name: computedIcon.value,
                       onClick (e) { onExpandClick(node, m, e) }
@@ -550,7 +554,7 @@ export default createComponent({
 
           m.hasTicking === true && m.noTick !== true
             ? h(QCheckbox, {
-                class: 'q-mr-xs',
+                class: 'q-tree__tickbox',
                 modelValue: m.indeterminate === true ? null : m.ticked,
                 color: computedControlColor.value,
                 dark: isDark.value,

package/src/components/tree/QTree.json

@@ -61,6 +61,11 @@
       "desc": "Color name for selected nodes (from the Quasar Color Palette)"
     },
 
+    "dense": {
+      "extends": "dense",
+      "addedIn": "v2.2.4"
+    },
+
     "dark": {
       "extends": "dark"
     },

package/src/components/tree/QTree.sass

@@ -39,7 +39,7 @@
     position: absolute
     top: -3px
     bottom: 50%
-    width: 35px
+    width: 31px
     left: -35px
     border-left: 1px solid currentColor
     border-bottom: 1px solid currentColor
@@ -84,11 +84,13 @@
   &__node--selected .q-tree__node-header-content
     color: $grey
 
-  &__icon, &__node-header-content .q-icon, &__spinner
+  &__icon,
+  &__node-header-content .q-icon
     font-size: 21px
 
   &__img
     height: 42px
+    border-radius: 2px
 
   &__avatar, &__node-header-content .q-avatar
     font-size: 28px
@@ -96,15 +98,20 @@
     width: 28px
     height: 28px
 
-  &__arrow, &__spinner
+  &__arrow,
+  &__spinner
     font-size: 16px
 
   &__arrow
     transition: transform .3s
+    margin-right: 4px
 
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg)
 
+  &__tickbox
+    margin-right: 4px
+
   // remove connectors before root
   > .q-tree__node
     padding: 0
@@ -123,10 +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
+
 [dir=rtl]
   .q-tree__arrow
     transform: rotate3d(0, 0, 1, 180deg) #{"/* rtl:ignore */"}
 
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg) #{"/* rtl:ignore */"}
-

package/src/components/uploader/uploader-core.js

@@ -260,20 +260,15 @@ export function getRenderer (getPlugin) {
   }
 
   function addFilesToQueue (e, fileList) {
-    const processedFiles = processFiles(e, fileList, state.files.value, true)
+    const localFiles = processFiles(e, fileList, state.files.value, true)
 
-    if (processedFiles === void 0) { return }
-
-    const localFiles = processedFiles
-      .filter(file => state.files.value.findIndex(f => file.name === f.name) === -1)
+    if (localFiles === void 0) { return }
 
     const fileInput = getFileInput()
     if (fileInput !== void 0 && fileInput !== null) {
       fileInput.value = ''
     }
 
-    if (localFiles === void 0) { return }
-
     localFiles.forEach(file => {
       state.updateFileStatus(file, 'idle')
       uploadSize.value += file.size

package/src/components/uploader/xhr-uploader-plugin.json

@@ -11,7 +11,7 @@
         }
       },
       "returns": {
-        "type": [ "Object", "Promise" ],
+        "type": [ "Object", "Promise<any>" ],
         "desc": "Optional configuration for the upload process; You can override QUploader props in this Object (url, method, headers, formFields, fieldName, withCredentials, sendRaw); Props of these Object can also be Functions with the form of (file[s]) => value",
         "__exemption": [ "examples" ]
       },
@@ -22,6 +22,18 @@
       "type": [ "String", "Function" ],
       "desc": "URL or path to the server which handles the upload. Takes String or factory function, which returns String. Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
       "examples": [ "https://example.com/path", "files => `https://example.com?count=${files.length}`" ],
+      "params": {
+        "files": {
+          "type": "Array",
+          "desc": "Uploaded files",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "URL or path to the server which handles the upload",
+        "__exemption": [ "examples" ]
+      },
       "category": "upload"
     },
 
@@ -31,6 +43,18 @@
       "desc": "HTTP method to use for upload; Takes String or factory function which returns a String; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
       "values": [ "POST", "PUT" ],
       "examples": [ "POST", ":method=\"files => files.length > 10 ? 'POST' : 'PUT'\"" ],
+      "params": {
+        "files": {
+          "type": "Array",
+          "desc": "Uploaded files",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "HTTP method to use for upload",
+        "__exemption": [ "examples" ]
+      },
       "category": "upload"
     },
 
@@ -42,6 +66,18 @@
         "backgroundFile",
         ":field-name=\"(file) => 'background' + file.name\""
       ],
+      "params": {
+        "files": {
+          "type": "File",
+          "desc": "The current file being processed",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "Field name for the current file upload",
+        "__exemption": [ "examples" ]
+      },
       "category": "upload"
     },
 
@@ -67,6 +103,18 @@
         "() => [{name: 'X-Custom-Timestamp', value: Date.now()}]",
         "files => [{name: 'X-Custom-Count', value: files.length}]"
       ],
+      "params": {
+        "files": {
+          "type": "Array",
+          "desc": "Uploaded files",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "An array consists of objects with header definitions",
+        "__exemption": [ "examples" ]
+      },
       "category": "upload"
     },
 
@@ -92,6 +140,18 @@
         "() => [{name: 'my-field', value: 'my-value'}]",
         "files => [{name: 'my-field', value: 'my-value' + files.length}]"
       ],
+      "params": {
+        "files": {
+          "type": "Array",
+          "desc": "Uploaded files",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "An array consists of objects with additional fields definitions (used by Form to be uploaded)",
+        "__exemption": [ "examples" ]
+      },
       "category": "upload"
     },
 
@@ -99,6 +159,18 @@
       "type": [ "Boolean", "Function" ],
       "desc": "Sets withCredentials to true on the XHR that manages the upload; Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
       "examples": [ "with-credentials", ":with-credentials=\"files => ...\"" ],
+      "params": {
+        "files": {
+          "type": "Array",
+          "desc": "Uploaded files",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, withCredentials will be set to true on the XHR that manages the upload",
+        "__exemption": [ "examples" ]
+      },
       "category": "upload"
     },
 
@@ -106,6 +178,18 @@
       "type": [ "Boolean", "Function" ],
       "desc": "Send raw files without wrapping into a Form(); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
       "examples": [ "send-raw", ":send-raw=\"files => ...\"" ],
+      "params": {
+        "files": {
+          "type": "Array",
+          "desc": "Uploaded files",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, raw files will get sent without wrapping into a Form()",
+        "__exemption": [ "examples" ]
+      },
       "category": "upload"
     },
 
@@ -113,6 +197,18 @@
       "type": [ "Boolean", "Function" ],
       "desc": "Upload files in batch (in one XHR request); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
       "examples": [ "files => files.length > 10" ],
+      "params": {
+        "files": {
+          "type": "Array",
+          "desc": "Uploaded files",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, files will be uploaded in a batch (in one XHR request)",
+        "__exemption": [ "examples" ]
+      },
       "category": "upload"
     }
   },

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onActivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import debounce from '../../utils/debounce.js'
 import { noop } from '../../utils/event.js'
@@ -679,6 +679,22 @@ export function useVirtualScroll ({
     setVirtualScrollSize()
   })
 
+  onActivated(() => {
+    const scrollEl = getVirtualScrollTarget()
+
+    if (prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
+      setScroll(
+        scrollEl,
+        prevScrollStart,
+        props.virtualScrollHorizontal,
+        $q.lang.rtl
+      )
+    }
+    else {
+      scrollTo(prevToIndex)
+    }
+  })
+
   setOverflowAnchor !== noop && onBeforeUnmount(() => {
     const styleSheet = document.getElementById(vsId + '_ss')
     styleSheet !== null && styleSheet.remove()

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)
 
@@ -88,9 +88,9 @@ export function useFieldState () {
 
     innerLoading: ref(false),
     focused: ref(false),
-    hasPopupOpen: ref(false),
+    hasPopupOpen: false,
 
-    splitAttrs: useSplitAttrs(attrs),
+    splitAttrs: useSplitAttrs(attrs, vnode),
     targetUid: ref(getTargetUid(props.for)),
 
     rootRef: ref(null),
@@ -301,7 +301,7 @@ export default function (state) {
     focusoutTimer = setTimeout(() => {
       if (
         document.hasFocus() === true && (
-          state.hasPopupOpen.value === true
+          state.hasPopupOpen === true
           || (
             state.controlRef !== void 0
             && (

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

@@ -112,6 +112,14 @@ export default function ({
       files = [ files[ 0 ] ]
     }
 
+    // Avoid duplicate files
+    const filenameMap = currentFileList.map(entry => entry.name)
+    files = filterFiles(files, rejectedFiles, 'duplicate', file => {
+      return filenameMap.includes(file.name) === false
+    })
+
+    if (files.length === 0) { return done() }
+
     if (props.maxTotalSize !== void 0) {
       let size = append === true
         ? currentFileList.reduce((total, file) => total + file.size, 0)

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

@@ -8,7 +8,7 @@ export const useModelToggleProps = {
     default: null
   },
 
-  'onUpdate:modelValue': Function
+  'onUpdate:modelValue': [ Function, Array ]
 }
 
 export const useModelToggleEmits = [

package/src/composables/private/use-refocus-target.js

@@ -16,12 +16,21 @@ export default function (props, rootRef) {
   })
 
   function refocusTarget (e) {
+    const root = rootRef.value
+
     if (e !== void 0 && e.type.indexOf('key') === 0) {
-      if (document.activeElement !== rootRef.value && rootRef.value.contains(document.activeElement) === true) {
-        rootRef.value.focus()
+      if (
+        root !== null
+        && document.activeElement !== root
+        && root.contains(document.activeElement) === true
+      ) {
+        root.focus()
       }
     }
-    else if ((e === void 0 || rootRef.value.contains(e.target) === true) && refocusRef.value !== null) {
+    else if (
+      refocusRef.value !== null
+      && (e === void 0 || (root !== null && root.contains(e.target) === true))
+    ) {
       refocusRef.value.focus()
     }
   }

package/src/composables/private/use-split-attrs.js

@@ -2,7 +2,7 @@ import { ref, onBeforeUpdate } from 'vue'
 
 const listenerRE = /^on[A-Z]/
 
-export default function (attrs) {
+export default function (attrs, vnode) {
   const acc = {
     listeners: ref({}),
     attributes: ref({})
@@ -21,6 +21,12 @@ export default function (attrs) {
       }
     })
 
+    Object.keys(vnode.props).forEach(key => {
+      if (listenerRE.test(key) === true) {
+        listeners[ key ] = vnode.props[ key ]
+      }
+    })
+
     acc.listeners.value = listeners
     acc.attributes.value = attributes
   }

package/src/composables/use-dialog-plugin-component.js

@@ -1,5 +1,7 @@
 import { ref, getCurrentInstance } from 'vue'
 
+import getEmitsObject from '../utils/private/get-emits-object'
+
 // To be used for the custom component
 // used on a Dialog plugin
 
@@ -34,6 +36,10 @@ function useDialogPluginComponent () {
   }
 }
 
-useDialogPluginComponent.emits = [ 'ok', 'hide' ]
+// Don't forget to update the types in "ui/types/composables.d.ts"
+const emits = [ 'ok', 'hide' ]
+
+useDialogPluginComponent.emits = emits
+useDialogPluginComponent.emitsObject = getEmitsObject(emits)
 
 export default useDialogPluginComponent

package/src/css/core/transitions.sass

@@ -1,4 +1,6 @@
-// default easing is easeOutCubic
+// should not need this, but it's good as fallback
+\:root
+  --q-transition-duration: .3s
 
 .q-transition
   &--slide-right,

package/src/install-quasar.js

@@ -84,6 +84,7 @@ export default __QUASAR_SSR_SERVER__
         _meta: {
           htmlAttrs: '',
           headTags: '',
+          endingHeadTags: '',
           bodyClasses: '',
           bodyAttrs: 'data-server-rendered',
           bodyTags: ''

package/src/utils/create-uploader-component.js

@@ -1,6 +1,9 @@
 import { coreProps, coreEmits, getRenderer } from '../components/uploader/uploader-core.js'
 
 import { createComponent } from './private/create.js'
+import getEmitsObject from './private/get-emits-object.js'
+
+const coreEmitsObject = getEmitsObject(coreEmits)
 
 export default ({ name, props, emits, injectPlugin }) => createComponent({
   name,
@@ -10,10 +13,9 @@ export default ({ name, props, emits, injectPlugin }) => createComponent({
     ...props
   },
 
-  emits: [
-    ...coreEmits,
-    ...emits
-  ],
+  emits: Object(emits) === emits
+    ? { ...coreEmitsObject, ...emits }
+    : [ ...coreEmits, ...emits ],
 
   setup () {
     return getRenderer(injectPlugin)

package/src/utils/date.js

@@ -403,7 +403,7 @@ export function __splitDate (str, mask, dateLocale, calendar, defaultModel) {
     }
   }
 
-  date.dateHash = date.year + '/' + pad(date.month) + '/' + pad(date.day)
+  date.dateHash = pad(date.year, 6) + '/' + pad(date.month) + '/' + pad(date.day)
   date.timeHash = pad(date.hour) + ':' + pad(date.minute) + ':' + pad(date.second) + tzString
 
   return date

package/src/utils/private/get-emits-object.js

@@ -0,0 +1,11 @@
+const trueFn = () => true
+
+export default function (emitsArray) {
+  const emitsObject = {}
+
+  emitsArray.forEach(val => {
+    emitsObject[ val ] = trueFn
+  })
+
+  return emitsObject
+}

package/src/utils/private/global-dialog.json

@@ -35,8 +35,16 @@
                 "type": "Function",
                 "desc": "Tell what to do",
                 "required": true,
-                "params": null,
-                "returns": null
+                "params": {
+                  "payload": {
+                    "type": "Any",
+                    "desc": "The payload if called onDialogOK with the parameter or emitted one with the 'ok' event",
+                    "required": false,
+                    "examples": [ "'Quasar Framework'", "[ 1, 2, 6, 3 ]", "{ book: { id: 1, name: 'Lorem Ipsum' }, user: { name: 'Lorem J. Ipsum', role: 'admin' } }" ]
+                  }
+                },
+                "returns": null,
+                "examples": [ "() => console.log('OK!')", "(payload) => Notify.create({ type: 'positive', message: `Successfully saved '${payload.book.name}' book!` })" ]
               }
             },
             "returns": {