quasar 2.1.9 → 2.2.0

package/src/components/skeleton/QSkeleton.sass

@@ -1,4 +1,5 @@
 .q-skeleton
+  --q-skeleton-speed: 1500ms
   background: $separator-color
   border-radius: $generic-border-radius
 
@@ -58,14 +59,14 @@
     border-radius: 0
 
   &--anim-fade
-    animation: q-skeleton--fade 1.5s linear .5s infinite
+    animation: q-skeleton--fade var(--q-skeleton-speed) linear .5s infinite
 
   &--anim-pulse
-    animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
+    animation: q-skeleton--pulse var(--q-skeleton-speed) ease-in-out .5s infinite
   &--anim-pulse-x
-    animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite
+    animation: q-skeleton--pulse-x var(--q-skeleton-speed) ease-in-out .5s infinite
   &--anim-pulse-y
-    animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite
+    animation: q-skeleton--pulse-y var(--q-skeleton-speed) ease-in-out .5s infinite
 
   &--anim-wave,
   &--anim-blink,
@@ -84,10 +85,10 @@
 
   &--anim-blink:after
     background: rgba(255,255,255,.7)
-    animation: q-skeleton--fade 1.5s linear .5s infinite
+    animation: q-skeleton--fade var(--q-skeleton-speed) linear .5s infinite
   &--anim-wave:after
     background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0))
-    animation: q-skeleton--wave 1.5s linear .5s infinite
+    animation: q-skeleton--wave var(--q-skeleton-speed) linear .5s infinite
 
   &--dark
     background: rgba(255, 255, 255, 0.05)

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