quasar 2.1.6 → 2.2.0

package/src/components/rating/QRating.js

@@ -4,6 +4,7 @@ import QIcon from '../icon/QIcon.js'
 
 import { stopAndPrevent } from '../../utils/event.js'
 import { between } from '../../utils/format.js'
+import { hMergeSlot } from '../../utils/private/render.js'
 
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
@@ -94,6 +95,51 @@ export default defineComponent({
       }
     })
 
+    const stars = computed(() => {
+      const
+        acc = [],
+        icons = iconData.value,
+        ceil = Math.ceil(props.modelValue)
+
+      const halfIndex = props.iconHalf === void 0 || ceil === props.modelValue
+        ? -1
+        : ceil
+
+      for (let i = 1; i <= props.max; i++) {
+        const
+          active = (mouseModel.value === 0 && props.modelValue >= i) || (mouseModel.value > 0 && mouseModel.value >= i),
+          half = halfIndex === i && mouseModel.value < i,
+          exSelected = mouseModel.value > 0 && (half === true ? ceil : props.modelValue) >= i && mouseModel.value < i,
+          color = half === true
+            ? (i <= icons.halfColorLen ? props.colorHalf[ i - 1 ] : icons.halfColor)
+            : (
+                icons.selColor !== void 0 && active === true
+                  ? (i <= icons.selColorLen ? props.colorSelected[ i - 1 ] : icons.selColor)
+                  : (i <= icons.colorLen ? props.color[ i - 1 ] : icons.color)
+              )
+
+        acc.push({
+          name: (
+            half === true
+              ? (i <= icons.halfIconLen ? props.iconHalf[ i - 1 ] : icons.halfIcon)
+              : (
+                  icons.selIcon !== void 0 && (active === true || exSelected === true)
+                    ? (i <= icons.selIconLen ? props.iconSelected[ i - 1 ] : icons.selIcon)
+                    : (i <= icons.iconLen ? props.icon[ i - 1 ] : icons.icon)
+                )
+          ) || $q.iconSet.rating.icon,
+
+          classes: 'q-rating__icon'
+            + (active === true || half === true ? ' q-rating__icon--active' : '')
+            + (exSelected === true ? ' q-rating__icon--exselected' : '')
+            + (mouseModel.value === i ? ' q-rating__icon--hovered' : '')
+            + (color !== void 0 ? ` text-${ color }` : '')
+        })
+      }
+
+      return acc
+    })
+
     const attributes = computed(() => {
       if (props.disable === true) {
         return { 'aria-disabled': 'true' }
@@ -103,6 +149,8 @@ export default defineComponent({
       }
     })
 
+    const tabindex = computed(() => (editable.value === true ? 0 : null))
+
     function set (value) {
       if (editable.value === true) {
         const
@@ -150,57 +198,29 @@ export default defineComponent({
     })
 
     return () => {
-      const
-        child = [],
-        tabindex = editable.value === true ? 0 : null,
-        icons = iconData.value,
-        ceil = Math.ceil(props.modelValue)
+      const child = []
 
-      const halfIndex = props.iconHalf === void 0 || ceil === props.modelValue
-        ? -1
-        : ceil
-
-      for (let i = 1; i <= props.max; i++) {
-        const
-          active = (mouseModel.value === 0 && props.modelValue >= i) || (mouseModel.value > 0 && mouseModel.value >= i),
-          half = halfIndex === i && mouseModel.value < i,
-          exSelected = mouseModel.value > 0 && (half === true ? ceil : props.modelValue) >= i && mouseModel.value < i,
-          name = half === true
-            ? (i <= icons.halfIconLen ? props.iconHalf[ i - 1 ] : icons.halfIcon)
-            : (
-                icons.selIcon !== void 0 && (active === true || exSelected === true)
-                  ? (i <= icons.selIconLen ? props.iconSelected[ i - 1 ] : icons.selIcon)
-                  : (i <= icons.iconLen ? props.icon[ i - 1 ] : icons.icon)
-              ),
-          color = half === true
-            ? (i <= icons.halfColorLen ? props.colorHalf[ i - 1 ] : icons.halfColor)
-            : (
-                icons.selColor !== void 0 && active === true
-                  ? (i <= icons.selColorLen ? props.colorSelected[ i - 1 ] : icons.selColor)
-                  : (i <= icons.colorLen ? props.color[ i - 1 ] : icons.color)
-              ),
-          classes = 'q-rating__icon'
-            + (active === true || half === true ? ' q-rating__icon--active' : '')
-            + (exSelected === true ? ' q-rating__icon--exselected' : '')
-            + (mouseModel.value === i ? ' q-rating__icon--hovered' : '')
-            + (color !== void 0 ? ` text-${ color }` : '')
+      stars.value.forEach(({ classes, name }, index) => {
+        const i = index + 1
 
         child.push(
-          h(QIcon, {
+          h('div', {
             key: i,
             ref: vm => { iconRefs[ `rt${ i }` ] = vm },
-            class: classes,
-            name: name || $q.iconSet.rating.icon,
-            tabindex,
+            class: 'q-rating__icon-container flex flex-center',
+            tabindex: tabindex.value,
             onClick () { set(i) },
             onMouseover () { setHoverValue(i) },
             onMouseout: resetMouseModel,
             onFocus () { setHoverValue(i) },
             onBlur: resetMouseModel,
             onKeyup (e) { onKeyup(e, i) }
-          }, slots[ `tip-${ i }` ])
+          }, hMergeSlot(
+            slots[ `tip-${ i }` ],
+            [ h(QIcon, { class: classes, name }) ]
+          ))
         )
-      }
+      })
 
       if (props.name !== void 0 && props.disable !== true) {
         injectFormInput(child, 'push')

package/src/components/rating/QRating.sass

@@ -2,6 +2,13 @@
   color: $rating-grade-color
   vertical-align: middle
 
+  &__icon-container
+    height: 1em
+    outline: 0
+
+    & + &
+      margin-left: 2px
+
   &__icon
     color: currentColor
     text-shadow: $rating-shadow
@@ -17,13 +24,8 @@
     &--exselected
       opacity: .7
 
-    & + &
-      margin-left: 2px
-
   &--no-dimming .q-rating__icon
     opacity: 1
 
-  &--editable .q-icon
+  &--editable .q-rating__icon-container
     cursor: pointer
-  &--non-editable span, .q-icon
-    outline: 0

package/src/components/select/QSelect.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUpdate, onUpdated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, defineComponent, ref, computed, watch, onBeforeUpdate, onUpdated, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import QField from '../field/QField.js'
 import QIcon from '../icon/QIcon.js'
@@ -142,7 +142,7 @@ export default defineComponent({
     const dialogFieldFocused = ref(false)
     const innerLoadingIndicator = ref(false)
 
-    let inputTimer, innerValueCache, optionScopeCache,
+    let inputTimer, innerValueCache,
       hasDialog, userInputValue, filterId, defaultInputValue,
       transitionShowComputed, searchBuffer, searchBufferExp
 
@@ -268,7 +268,7 @@ export default defineComponent({
     const tabindex = computed(() => (state.focused.value === true ? props.tabindex : -1))
 
     const comboboxAttrs = computed(() => ({
-      tabindex: tabindex.value,
+      tabindex: props.tabindex,
       role: 'combobox',
       'aria-label': props.label,
       'aria-autocomplete': props.useInput === true ? 'list' : 'none',
@@ -309,7 +309,6 @@ export default defineComponent({
       }
 
       const { from, to } = virtualScrollSliceRange.value
-      const { options, optionEls } = optionScopeCache
 
       return props.options.slice(from, to).map((opt, i) => {
         const disable = isOptionDisabled.value(opt) === true
@@ -341,7 +340,7 @@ export default defineComponent({
           }
         }
 
-        const option = {
+        return {
           index,
           opt,
           html: needsHtmlFn.value(opt),
@@ -352,22 +351,6 @@ export default defineComponent({
           setOptionIndex,
           itemProps
         }
-
-        const optionWithoutEvents = {
-          ...option,
-          itemProps: {
-            ...itemProps,
-            onClick: void 0,
-            onMousemove: void 0
-          }
-        }
-
-        if (options[ i ] === void 0 || isDeepEqual(optionWithoutEvents, options[ i ]) !== true) {
-          options[ i ] = optionWithoutEvents
-          optionEls[ i ] = void 0
-        }
-
-        return option
       })
     })
 
@@ -949,14 +932,6 @@ export default defineComponent({
     }
 
     function getAllOptions () {
-      if (
-        slots.option !== void 0
-        && optionScopeCache.optionSlot !== slots.option
-      ) {
-        optionScopeCache.optionSlot = slots.option
-        optionScopeCache.optionEls = []
-      }
-
       const fn = slots.option !== void 0
         ? slots.option
         : scope => {
@@ -976,17 +951,7 @@ export default defineComponent({
           })
         }
 
-      const { optionEls } = optionScopeCache
-
-      let options = padVirtualScroll('div', optionScope.value.map((scope, i) => {
-        if (optionEls[ i ] === void 0) {
-          optionEls[ i ] = fn(scope)
-        }
-
-        // rendered vnode always needs a new
-        // "instance" otherwise DOM diff will say nothing changed
-        return { ...optionEls[ i ] }
-      }))
+      let options = padVirtualScroll('div', optionScope.value.map(fn))
 
       if (slots[ 'before-options' ] !== void 0) {
         options = slots[ 'before-options' ]().concat(options)
@@ -1298,10 +1263,6 @@ export default defineComponent({
     }
 
     function closeMenu () {
-      if (optionScopeCache !== void 0) {
-        optionScopeCache.optionEls = []
-      }
-
       if (dialog.value === true) {
         return
       }
@@ -1417,16 +1378,7 @@ export default defineComponent({
 
     updatePreState()
 
-    onBeforeMount(() => {
-      optionScopeCache = {
-        optionSlot: slots.option,
-        options: [],
-        optionEls: []
-      }
-    })
-
     onBeforeUnmount(() => {
-      optionScopeCache = void 0
       clearTimeout(inputTimer)
     })
 

package/src/components/select/QSelect.json

@@ -8,7 +8,7 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "Number", "String", "Array", "null" ],
+      "type": [ "Number", "String", "Array", "null", "undefined" ],
       "desc": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "examples": [ "v-model=\"myModel\"" ]
     },

package/src/components/skeleton/QSkeleton.js

@@ -38,6 +38,10 @@ export default defineComponent({
       validator: v => skeletonAnimations.includes(v),
       default: 'wave'
     },
+    animationSpeed: {
+      type: [ String, Number ],
+      default: 1500
+    },
 
     square: Boolean,
     bordered: Boolean,
@@ -51,11 +55,17 @@ export default defineComponent({
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
-    const style = computed(() => (
-      props.size !== void 0
-        ? { width: props.size, height: props.size }
-        : { width: props.width, height: props.height }
-    ))
+    const style = computed(() => {
+      const size = props.size !== void 0
+        ? [ props.size, props.size ]
+        : [ props.width, props.height ]
+
+      return {
+        '--q-skeleton-speed': `${ props.animationSpeed }ms`,
+        width: size[ 0 ],
+        height: size[ 1 ]
+      }
+    })
 
     const classes = computed(() =>
       `q-skeleton q-skeleton--${ isDark.value === true ? 'dark' : 'light' } q-skeleton--type-${ props.type }`

package/src/components/skeleton/QSkeleton.json

@@ -32,6 +32,15 @@
       "category": "style"
     },
 
+    "animation-speed": {
+      "type": [ "String", "Number" ],
+      "desc": "Animation speed (in milliseconds, without unit)",
+      "default": 300,
+      "examples": [ 500, "1200" ],
+      "category": "style",
+      "addedIn": "v2.2"
+    },
+
     "square": {
       "extends": "square"
     },

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/components/slider/QSlider.json

@@ -8,7 +8,7 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "Number", "null" ],
+      "type": [ "Number", "null", "undefined" ],
       "desc": "Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "examples": [ "v-model=\"positionModel\"" ]
     },

package/src/components/tabs/QTabs.json

@@ -6,7 +6,7 @@
   "props": {
     "model-value":{
       "extends": "model-value",
-      "type": [ "Number", "String", "null" ],
+      "type": [ "Number", "String", "null", "undefined" ],
       "desc": "Model of the component defining current panel name; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "required": false,
       "examples": [ "v-model=\"selectedTab\"" ]

package/src/components/time/QTime.json

@@ -8,7 +8,7 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "String", "null" ],
+      "type": [ "String", "null", "undefined" ],
       "desc": "Time of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "examples": [
         "v-model=\"currentTime\""

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