quasar 2.1.9 → 2.2.3

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: {

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

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,11 @@ 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({
+export default createComponent({
   name: 'QTree',
 
   props: {

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/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-panel.js

@@ -33,6 +33,10 @@ export const usePanelProps = {
 
   transitionPrev: String,
   transitionNext: String,
+  transitionDuration: {
+    type: [ String, Number ],
+    default: 300
+  },
 
   keepAlive: Boolean,
   keepAliveInclude: [ String, Array, RegExp ],
@@ -78,6 +82,10 @@ export default function () {
     props.transitionNext || `slide-${ props.vertical === true ? 'up' : 'left' }`
   )
 
+  const transitionStyle = computed(
+    () => `--q-transition-duration: ${ props.transitionDuration }ms`
+  )
+
   const contentKey = computed(() => (
     typeof props.modelValue === 'string' || typeof props.modelValue === 'number'
       ? props.modelValue
@@ -197,7 +205,7 @@ export default function () {
   }
 
   function getPanelContentChild () {
-    const panel = isValidPanelName(props.modelValue)
+    const panel = isValidPanelName(props.modelValue) === true
       && updatePanelIndex()
       && panels[ panelIndex.value ]
 
@@ -208,7 +216,7 @@ export default function () {
               needsUniqueKeepAliveWrapper.value === true
                 ? getCacheWithFn(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value }))
                 : PanelWrapper,
-              { key: contentKey.value },
+              { key: contentKey.value, style: transitionStyle.value },
               () => panel
             )
           ])
@@ -216,6 +224,7 @@ export default function () {
       : [
           h('div', {
             class: 'q-panel scroll',
+            style: transitionStyle.value,
             key: contentKey.value,
             role: 'tabpanel'
           }, [ panel ])
@@ -228,11 +237,7 @@ export default function () {
     }
 
     return props.animated === true
-      ? [
-          h(Transition, {
-            name: panelTransition.value
-          }, getPanelContentChild)
-        ]
+      ? [ h(Transition, { name: panelTransition.value }, getPanelContentChild) ]
       : getPanelContentChild()
   }
 
@@ -242,7 +247,7 @@ export default function () {
     ).filter(
       panel => panel.props !== null
         && panel.props.slot === void 0
-        && isValidPanelName(panel.props.name)
+        && isValidPanelName(panel.props.name) === true
     )
 
     return panels.length

package/src/composables/private/use-panel.json

@@ -62,14 +62,23 @@
       "extends": "transition",
       "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
       "default": "slide-right/slide-down",
-      "category": "behavior"
+      "category": "transition"
     },
 
     "transition-next": {
       "extends": "transition",
       "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
       "default": "slide-left/slide-up",
-      "category": "behavior"
+      "category": "transition"
+    },
+
+    "transition-duration": {
+      "type": [ "String", "Number" ],
+      "desc": "Transition duration (in milliseconds, without unit)",
+      "default": 300,
+      "examples": [ 500, "1200" ],
+      "category": "transition",
+      "addedIn": "v2.2"
     }
   },
 

package/src/css/core/transitions.sass

@@ -1,9 +1,5 @@
 // default easing is easeOutCubic
 
-\:root
-  --q-transition-duration: .3s
-  --q-transition-easing: cubic-bezier(0.215,0.61,0.355,1)
-
 .q-transition
   &--slide-right,
   &--slide-left,
@@ -17,6 +13,10 @@
   &--scale,
   &--rotate,
   &--flip
+    &-enter-active,
+    &-leave-active
+      --q-transition-duration: .3s
+      --q-transition-easing: cubic-bezier(0.215,0.61,0.355,1)
     &-leave-active
       position: absolute
 

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

package/src/directives/Scroll.js

@@ -1,3 +1,4 @@
+import { createDirective } from '../utils/private/create.js'
 import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../utils/scroll.js'
 import { listenOpts } from '../utils/event.js'
 import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
@@ -14,7 +15,7 @@ function update (ctx, { value, oldValue }) {
   }
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'scroll', getSSRProps }
   : {
       name: 'scroll',
@@ -47,3 +48,4 @@ export default __QUASAR_SSR_SERVER__
         delete el.__qscroll
       }
     }
+)

package/src/directives/ScrollFire.js

@@ -1,3 +1,4 @@
+import { createDirective } from '../utils/private/create.js'
 import debounce from '../utils/debounce.js'
 import { height, offset } from '../utils/dom.js'
 import { getScrollTarget } from '../utils/scroll.js'
@@ -19,7 +20,7 @@ function update (ctx, { value, oldValue }) {
   }
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'scroll-fire', getSSRProps }
   : {
       name: 'scroll-fire',
@@ -63,3 +64,4 @@ export default __QUASAR_SSR_SERVER__
         delete el.__qscrollfire
       }
     }
+)

package/src/directives/TouchHold.js

@@ -1,9 +1,11 @@
 import { client } from '../plugins/Platform.js'
+
+import { createDirective } from '../utils/private/create.js'
 import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/private/selection.js'
 import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'touch-hold', getSSRProps }
   : {
       name: 'touch-hold',
@@ -157,3 +159,4 @@ export default __QUASAR_SSR_SERVER__
         }
       }
     }
+)

package/src/directives/TouchPan.js

@@ -1,4 +1,6 @@
 import { client } from '../plugins/Platform.js'
+
+import { createDirective } from '../utils/private/create.js'
 import { getModifierDirections, shouldStart } from '../utils/private/touch.js'
 import { addEvt, cleanEvt, position, leftClick, prevent, stop, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/private/selection.js'
@@ -117,7 +119,7 @@ function getChanges (evt, ctx, isFinal) {
 
 let uid = 0
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'touch-pan', getSSRProps }
   : {
       name: 'touch-pan',
@@ -422,3 +424,4 @@ export default __QUASAR_SSR_SERVER__
         }
       }
     }
+)

package/src/directives/TouchRepeat.js

@@ -1,4 +1,6 @@
 import { client } from '../plugins/Platform.js'
+
+import { createDirective } from '../utils/private/create.js'
 import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/private/selection.js'
 import { isKeyCode } from '../utils/private/key-composition.js'
@@ -25,7 +27,7 @@ function shouldEnd (evt, origin) {
     || Math.abs(top - origin.top) >= 7
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'touch-repeat', getSSRProps }
   : {
       name: 'touch-repeat',
@@ -239,3 +241,4 @@ export default __QUASAR_SSR_SERVER__
         }
       }
     }
+)

package/src/directives/TouchSwipe.js

@@ -1,4 +1,6 @@
 import { client } from '../plugins/Platform.js'
+
+import { createDirective } from '../utils/private/create.js'
 import { getModifierDirections, shouldStart } from '../utils/private/touch.js'
 import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/private/selection.js'
@@ -20,7 +22,7 @@ function parseArg (arg) {
   return data
 }
 
-export default __QUASAR_SSR_SERVER__
+export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'touch-swipe', getSSRProps }
   : {
       name: 'touch-swipe',
@@ -263,3 +265,4 @@ export default __QUASAR_SSR_SERVER__
         }
       }
     }
+)