quasar 2.2.0 → 2.2.4

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/tabs/use-tab.js

@@ -1,10 +1,10 @@
-import { h, ref, computed, inject, onBeforeUnmount, onMounted } from 'vue'
+import { h, ref, computed, inject, onBeforeUnmount, onMounted, withDirectives } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
 import Ripple from '../../directives/Ripple.js'
 
-import { hMergeSlot, hDir } from '../../utils/private/render.js'
+import { hMergeSlot } from '../../utils/private/render.js'
 import { isKeyCode } from '../../utils/private/key-composition.js'
 import { tabsKey } from '../../utils/private/symbols.js'
 
@@ -46,6 +46,12 @@ export default function (props, slots, emit, routerProps) {
   const rootRef = ref(null)
   const tabIndicatorRef = ref(null)
 
+  const ripple = computed(() => (
+    props.disable === true
+      ? false
+      : props.ripple
+  ))
+
   const isActive = computed(() => $tabs.currentModel.value === props.name)
 
   const classes = computed(() =>
@@ -202,13 +208,9 @@ export default function (props, slots, emit, routerProps) {
       ...customData
     }
 
-    return hDir(
-      tag,
-      data,
-      getContent(),
-      'main',
-      props.ripple !== false && props.disable === false,
-      () => [ [ Ripple, props.ripple ] ]
+    return withDirectives(
+      h(tag, data, getContent()),
+      [ [ Ripple, ripple.value ] ]
     )
   }
 

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

package/src/directives/Ripple.js

@@ -1,3 +1,4 @@
+import { createDirective } from '../utils/private/create.js'
 import { css } from '../utils/dom.js'
 import { position, stop, addEvt, cleanEvt } from '../utils/event.js'
 import { isKeyCode } from '../utils/private/key-composition.js'
@@ -71,7 +72,7 @@ function updateModifiers (ctx, { modifiers, value, arg, instance }) {
   }
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'ripple', getSSRProps }
   : {
       name: 'ripple',
@@ -139,3 +140,4 @@ export default __QUASAR_SSR_SERVER__
         delete el._qripple
       }
     }
+)