quasar 2.2.2 → 2.3.1

package/src/components/toolbar/QToolbarTitle.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QToolbarTitle',
 
   props: {

package/src/components/tooltip/QTooltip.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
 import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
 import useScrollTarget from '../../composables/private/use-scroll-target.js'
@@ -8,6 +8,7 @@ import useTransition, { useTransitionProps } from '../../composables/private/use
 import useTick from '../../composables/private/use-tick.js'
 import useTimeout from '../../composables/private/use-timeout.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { getScrollTarget } from '../../utils/scroll.js'
 import { stopAndPrevent, addEvt, cleanEvt } from '../../utils/event.js'
 import { clearSelection } from '../../utils/private/selection.js'
@@ -17,7 +18,7 @@ import {
   validatePosition, validateOffset, setPosition, parsePosition
 } from '../../utils/private/position-engine.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTooltip',
 
   inheritAttrs: false,

package/src/components/tree/QTree.js

@@ -1,5 +1,5 @@
 import {
-  h, defineComponent, ref, computed, watch,
+  h, ref, computed, watch,
   withDirectives, vShow, nextTick, getCurrentInstance, onBeforeUpdate
 } from 'vue'
 
@@ -10,10 +10,13 @@ import QSpinner from '../spinner/QSpinner.js'
 
 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'
 
-export default defineComponent({
+const tickStrategyOptions = [ 'none', 'strict', 'leaf', 'leaf-filtered' ]
+
+export default createComponent({
   name: 'QTree',
 
   props: {
@@ -36,6 +39,8 @@ export default defineComponent({
       default: 'children'
     },
 
+    dense: Boolean,
+
     color: String,
     controlColor: String,
     textColor: String,
@@ -46,7 +51,7 @@ export default defineComponent({
     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
@@ -91,7 +96,7 @@ export default defineComponent({
     })
 
     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 }` : '')
@@ -533,13 +538,13 @@ export default defineComponent({
 
           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) }
@@ -549,7 +554,7 @@ export default defineComponent({
 
           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/QUploaderAddTrigger.js

@@ -1,8 +1,9 @@
-import { defineComponent, inject } from 'vue'
+import { inject } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { uploaderKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QUploaderAddTrigger',
 
   setup () {

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/video/QVideo.js

@@ -1,8 +1,10 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
 import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QVideo',
 
   props: {

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

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
+import { h, ref, computed, watch, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
 
 import QList from '../item/QList.js'
 import QMarkupTable from '../markup-table/QMarkupTable.js'
@@ -6,6 +6,7 @@ import getTableMiddle from '../table/get-table-middle.js'
 
 import { useVirtualScroll, useVirtualScrollProps } from './use-virtual-scroll.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { getScrollTarget } from '../../utils/scroll.js'
 import { listenOpts } from '../../utils/event.js'
 import { hMergeSlot } from '../../utils/private/render.js'
@@ -17,7 +18,7 @@ const comps = {
 
 const typeOptions = [ 'list', 'table', '__qtable' ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QVirtualScroll',
 
   props: {

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

@@ -88,7 +88,7 @@ export function useFieldState () {
 
     innerLoading: ref(false),
     focused: ref(false),
-    hasPopupOpen: ref(false),
+    hasPopupOpen: false,
 
     splitAttrs: useSplitAttrs(attrs),
     targetUid: ref(getTargetUid(props.for)),
@@ -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/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,9 @@ function useDialogPluginComponent () {
   }
 }
 
-useDialogPluginComponent.emits = [ 'ok', 'hide' ]
+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/css/normalize.sass

@@ -160,13 +160,6 @@ progress
 textarea
   overflow: auto
 
-/*
- * Correct the odd appearance of search inputs in Chrome and Safari.
- */
-
-input[type='search']
-  -webkit-appearance: textfield
-
 /*
  * Remove the inner padding and cancel buttons in Chrome on OS X and
  * Safari on OS X.

package/src/directives/ClosePopup.js

@@ -1,3 +1,4 @@
+import { createDirective } from '../utils/private/create.js'
 import { closePortals, getPortalVm } from '../utils/private/portal.js'
 import { isKeyCode } from '../utils/private/key-composition.js'
 import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
@@ -21,7 +22,7 @@ function getDepth (value) {
   return isNaN(depth) ? 0 : depth
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'close-popup', getSSRProps }
   : {
       name: 'close-popup',
@@ -64,3 +65,4 @@ export default __QUASAR_SSR_SERVER__
         delete el.__qclosepopup
       }
     }
+)

package/src/directives/Intersection.js

@@ -1,3 +1,4 @@
+import { createDirective } from '../utils/private/create.js'
 import { isDeepEqual } from '../utils/private/is.js'
 import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
 
@@ -66,7 +67,7 @@ function destroy (el) {
   }
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'intersection', getSSRProps }
   : {
       name: 'intersection',
@@ -88,3 +89,4 @@ export default __QUASAR_SSR_SERVER__
 
       beforeUnmount: destroy
     }
+)

package/src/directives/Morph.js

@@ -1,4 +1,6 @@
+import { createDirective } from '../utils/private/create.js'
 import morph from '../utils/morph.js'
+
 import getSSRProps from './Morph.ssr.js'
 
 const morphGroups = {}
@@ -161,7 +163,7 @@ function updateValue (ctx, value) {
   }
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'morph', getSSRProps }
   : {
       name: 'morph',
@@ -209,3 +211,4 @@ export default __QUASAR_SSR_SERVER__
         delete el.__qmorph
       }
     }
+)

package/src/directives/Mutation.js

@@ -1,3 +1,4 @@
+import { createDirective } from '../utils/private/create.js'
 import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
 
 const defaultCfg = {
@@ -34,7 +35,7 @@ function destroy (el) {
   }
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'mutation', getSSRProps }
   : {
       name: 'mutation',
@@ -61,3 +62,4 @@ export default __QUASAR_SSR_SERVER__
 
       beforeUnmount: destroy
     }
+)