quasar 2.2.1 → 2.3.0

package/src/components/tab-panels/QTabPanel.js

@@ -1,9 +1,11 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import { usePanelChildProps } from '../../composables/private/use-panel.js'
+
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTabPanel',
 
   props: usePanelChildProps,

package/src/components/tab-panels/QTabPanels.js

@@ -1,11 +1,12 @@
-import { defineComponent, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private/use-panel.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hDir } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTabPanels',
 
   props: {

package/src/components/table/QTable.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
 import QTh from './QTh.js'
 
@@ -23,12 +23,14 @@ import { useTableRowSelection, useTableRowSelectionProps, useTableRowSelectionEm
 import { useTableRowExpand, useTableRowExpandProps, useTableRowExpandEmits } from './table-row-expand.js'
 import { useTableColumnSelection, useTableColumnSelectionProps } from './table-column-selection.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const bottomClass = 'q-table__bottom row items-center'
 
 const commonVirtPropsObj = {}
 commonVirtPropsList.forEach(p => { commonVirtPropsObj[ p ] = {} })
 
-export default defineComponent({
+export default createComponent({
   name: 'QTable',
 
   props: {

package/src/components/table/QTable.json

@@ -156,6 +156,7 @@
         "align": {
           "type": "String",
           "desc": "Horizontal alignment of cells in this column",
+          "values": [ "left", "right", "center" ],
           "default": "right",
           "examples": [ "left", "right", "center" ]
         },

package/src/components/table/QTd.js

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

package/src/components/table/QTh.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, getCurrentInstance } from 'vue'
+import { h, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hUniqueSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTh',
 
   props: {

package/src/components/table/QTr.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: 'QTr',
 
   props: {

package/src/components/table/table-pagination.js

@@ -26,7 +26,7 @@ export const useTablePaginationProps = {
     default: () => [ 5, 7, 10, 15, 20, 25, 50, 0 ]
   },
 
-  'onUpdate:pagination': Function
+  'onUpdate:pagination': [ Function, Array ]
 }
 
 export function useTablePaginationState (vm, getCellValue) {
@@ -76,7 +76,7 @@ export function useTablePaginationState (vm, getCellValue) {
       ...val
     })
 
-    if (samePagination(computedPagination.value, newPagination)) {
+    if (samePagination(computedPagination.value, newPagination) === true) {
       if (isServerSide.value === true && forceServerRequest === true) {
         sendServerRequest(newPagination)
       }

package/src/components/tabs/QRouteTab.js

@@ -1,9 +1,11 @@
-import { defineComponent, computed, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 import useTab, { useTabProps, useTabEmits } from './use-tab.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QRouteTab',
 
   props: {

package/src/components/tabs/QTab.js

@@ -1,8 +1,8 @@
-import { defineComponent } from 'vue'
-
 import useTab, { useTabProps, useTabEmits } from './use-tab.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QTab',
 
   props: useTabProps,

package/src/components/tabs/QTabs.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, getCurrentInstance, provide } from 'vue'
+import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, getCurrentInstance, provide } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
@@ -6,6 +6,7 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 import useTick from '../../composables/private/use-tick.js'
 import useTimeout from '../../composables/private/use-timeout.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { noop } from '../../utils/event.js'
 import { hSlot } from '../../utils/private/render.js'
 import { tabsKey } from '../../utils/private/symbols.js'
@@ -22,7 +23,7 @@ function getIndicatorClass (color, top, vertical) {
 const alignValues = [ 'left', 'center', 'right', 'justify' ]
 const emptyFn = () => {}
 
-export default defineComponent({
+export default createComponent({
   name: 'QTabs',
 
   props: {
@@ -62,7 +63,7 @@ export default defineComponent({
 
     contentClass: String,
 
-    'onUpdate:modelValue': Function
+    'onUpdate:modelValue': [ Function, Array ]
   },
 
   setup (props, { slots, emit }) {

package/src/components/time/QTime.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, withDirectives, Transition, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, withDirectives, Transition, nextTick, getCurrentInstance } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import TouchPan from '../../directives/TouchPan.js'
@@ -7,6 +7,7 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
 import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from '../date/use-datetime.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { formatDate, __splitDate } from '../../utils/date.js'
 import { position } from '../../utils/event.js'
@@ -36,7 +37,7 @@ function getCurrentTime () {
   }
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QTime',
 
   props: {
@@ -288,8 +289,6 @@ export default defineComponent({
         defaultDateModel.value
       )
 
-      console.log({ ...model })
-
       if (
         model.dateHash !== innerModel.value.dateHash
         || model.timeHash !== innerModel.value.timeHash
@@ -660,21 +659,22 @@ export default defineComponent({
     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/timeline/QTimeline.js

@@ -1,11 +1,12 @@
-import { h, defineComponent, computed, provide, getCurrentInstance } from 'vue'
+import { h, computed, provide, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { timelineKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTimeline',
 
   props: {

package/src/components/timeline/QTimelineEntry.js

@@ -1,11 +1,12 @@
-import { h, defineComponent, computed, inject } from 'vue'
+import { h, computed, inject } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hUniqueSlot } from '../../utils/private/render.js'
 import { timelineKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QTimelineEntry',
 
   props: {

package/src/components/toggle/QToggle.js

@@ -1,9 +1,12 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
+
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from '../checkbox/use-checkbox.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QToggle',
 
   props: {

package/src/components/toolbar/QToolbar.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: 'QToolbar',
 
   props: {

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/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-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 = [