quasar 2.1.9 → 2.2.3

package/src/components/radio/QRadio.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, ref, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import useRefocusTarget from '../../composables/private/use-refocus-target.js'
 import { useFormProps, useFormInject } from '../../composables/private/use-form.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import optionSizes from '../../utils/private/option-sizes.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
@@ -24,7 +25,7 @@ const svg = h('svg', {
   })
 ])
 
-export default defineComponent({
+export default createComponent({
   name: 'QRadio',
 
   props: {

package/src/components/range/QRange.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
@@ -10,6 +10,7 @@ import useSlider, {
   keyCodes
 } from '../slider/use-slider.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { between } from '../../utils/format.js'
 import { hDir } from '../../utils/private/render.js'
@@ -20,7 +21,7 @@ const dragType = {
   MAX: 2
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QRange',
 
   props: {
@@ -488,7 +489,7 @@ export default defineComponent({
         })
       ]
 
-      props.markers === true && track.push(
+      props.markers !== false && track.push(
         h('div', {
           class: `q-slider__track-markers q-slider__track-markers${ state.axis.value } absolute-full fit`,
           style: state.markerStyle.value

package/src/components/range/QRange.json

@@ -144,9 +144,13 @@
     },
 
     "markers": {
-      "type": "Boolean",
-      "desc": "Display markers on the track, one for each possible value for the model",
-      "category": "content"
+      "type": [ "Boolean", "Number" ],
+      "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
+      "category": "content",
+      "examples": [
+        "markers",
+        ":markers=\"5\""
+      ]
     },
 
     "snap": {

package/src/components/rating/QRating.js

@@ -1,14 +1,16 @@
-import { h, defineComponent, ref, computed, onBeforeUpdate, getCurrentInstance } from 'vue'
+import { h, ref, computed, onBeforeUpdate, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import { stopAndPrevent } from '../../utils/event.js'
-import { between } from '../../utils/format.js'
-
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+import { stopAndPrevent } from '../../utils/event.js'
+import { between } from '../../utils/format.js'
+import { hMergeSlot } from '../../utils/private/render.js'
+
+export default createComponent({
   name: 'QRating',
 
   props: {
@@ -94,6 +96,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 +150,8 @@ export default defineComponent({
       }
     })
 
+    const tabindex = computed(() => (editable.value === true ? 0 : null))
+
     function set (value) {
       if (editable.value === true) {
         const
@@ -150,57 +199,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/resize-observer/QResizeObserver.js

@@ -1,7 +1,8 @@
-import { h, defineComponent, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
+import { h, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
 
 import useCanRender from '../../composables/private/use-can-render.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { listenOpts, noop } from '../../utils/event.js'
 
 const hasObserver = typeof ResizeObserver !== 'undefined'
@@ -12,7 +13,7 @@ const resizeProps = hasObserver === true
       url: 'about:blank'
     }
 
-export default defineComponent({
+export default createComponent({
   name: 'QResizeObserver',
 
   props: {

package/src/components/responsive/QResponsive.js

@@ -1,10 +1,11 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QResponsive',
 
   props: useRatioProps,

package/src/components/scroll-area/QScrollArea.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -7,6 +7,7 @@ import QScrollObserver from '../scroll-observer/QScrollObserver.js'
 
 import TouchPan from '../../directives/TouchPan.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { setVerticalScrollPosition, setHorizontalScrollPosition } from '../../utils/scroll.js'
 import { hMergeSlot } from '../../utils/private/render.js'
@@ -18,7 +19,7 @@ const dirProps = {
   horizontal: { offset: 'offsetX', scroll: 'scrollLeft', dir: 'right', dist: 'x' }
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QScrollArea',
 
   props: {

package/src/components/scroll-observer/QScrollObserver.js

@@ -1,12 +1,13 @@
-import { defineComponent, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../../utils/scroll.js'
 import { listenOpts, noop } from '../../utils/event.js'
 
 const { passive } = listenOpts
 const axisValues = [ 'both', 'horizontal', 'vertical' ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QScrollObserver',
 
   props: {

package/src/components/select/QSelect.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUpdate, onUpdated, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onBeforeUpdate, onUpdated, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import QField from '../field/QField.js'
 import QIcon from '../icon/QIcon.js'
@@ -16,6 +16,7 @@ import { useVirtualScroll, useVirtualScrollProps } from '../virtual-scroll/use-v
 import { useFormProps, useFormInputNameAttr } from '../../composables/private/use-form.js'
 import useKeyComposition from '../../composables/private/use-key-composition.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { isDeepEqual } from '../../utils/private/is.js'
 import { stop, prevent, stopAndPrevent } from '../../utils/event.js'
 import { normalizeToInterval } from '../../utils/format.js'
@@ -26,7 +27,7 @@ const validateNewValueMode = v => [ 'add', 'add-unique', 'toggle' ].includes(v)
 const reEscapeList = '.*+?^${}()|[]\\'
 const fieldPropsList = Object.keys(useFieldProps)
 
-export default defineComponent({
+export default createComponent({
   name: 'QSelect',
 
   inheritAttrs: false,

package/src/components/separator/QSeparator.js

@@ -1,7 +1,9 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const insetMap = {
   true: 'inset',
   item: 'item-inset',
@@ -16,7 +18,7 @@ export const margins = {
   xl: 24
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QSeparator',
 
   props: {

package/src/components/separator/QSeparator.json

@@ -20,7 +20,7 @@
 
     "inset": {
       "type": [ "Boolean", "String" ],
-      "desc": "if set to true, the left and right margins will be set to 16px. If set to item, the left and right margins will be set to 72px. If set to item-thumbnail, the left margin is set to 116px and right margin is set to 0px",
+      "desc": "If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side",
       "examples": [ "item", "item-thumbnail" ],
       "category": "content"
     },

package/src/components/skeleton/QSkeleton.js

@@ -1,7 +1,8 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, 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'
 
 export const skeletonTypes = [
@@ -16,7 +17,7 @@ export const skeletonAnimations = [
   'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none'
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSkeleton',
 
   props: {
@@ -38,6 +39,10 @@ export default defineComponent({
       validator: v => skeletonAnimations.includes(v),
       default: 'wave'
     },
+    animationSpeed: {
+      type: [ String, Number ],
+      default: 1500
+    },
 
     square: Boolean,
     bordered: Boolean,
@@ -51,11 +56,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/slide-item/QSlideItem.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, ref, computed, withDirectives, onBeforeUnmount, onBeforeUpdate, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onBeforeUnmount, onBeforeUpdate, getCurrentInstance } from 'vue'
 
 import TouchPan from '../../directives/TouchPan.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useCache from '../../composables/private/use-cache.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
 const slotsDef = [
@@ -14,7 +15,7 @@ const slotsDef = [
   [ 'bottom', 'end', 'center', 'height' ]
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSlideItem',
 
   props: {

package/src/components/slide-transition/QSlideTransition.js

@@ -1,6 +1,8 @@
-import { h, defineComponent, onBeforeUnmount, Transition } from 'vue'
+import { h, onBeforeUnmount, Transition } from 'vue'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QSlideTransition',
 
   props: {

package/src/components/slider/QSlider.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
 import { useFormInject, useFormProps, useFormAttrs } from '../../composables/private/use-form.js'
 
@@ -10,11 +10,12 @@ import useSlider, {
   keyCodes
 } from './use-slider.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { hDir } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QSlider',
 
   props: {
@@ -206,7 +207,7 @@ export default defineComponent({
         })
       ]
 
-      props.markers === true && track.push(
+      props.markers !== false && track.push(
         h('div', {
           class: `q-slider__track-markers q-slider__track-markers${ state.axis.value } absolute-full fit`,
           style: state.markerStyle.value

package/src/components/slider/QSlider.json

@@ -83,9 +83,13 @@
     },
 
     "markers": {
-      "type": "Boolean",
-      "desc": "Display markers on the track, one for each possible value for the model",
-      "category": "content"
+      "type": [ "Boolean", "Number" ],
+      "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
+      "category": "content",
+      "examples": [
+        "markers",
+        ":markers=\"5\""
+      ]
     },
 
     "snap": {

package/src/components/slider/use-slider.js

@@ -6,6 +6,7 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import { between } from '../../utils/format.js'
 import { position } from '../../utils/event.js'
+import { isNumber } from '../../utils/private/is.js'
 
 // PGDOWN, LEFT, DOWN, PGUP, RIGHT, UP
 export const keyCodes = [ 34, 37, 40, 33, 39, 38 ]
@@ -60,7 +61,7 @@ export const useSliderProps = {
 
   label: Boolean,
   labelAlways: Boolean,
-  markers: Boolean,
+  markers: [ Boolean, Number ],
   snap: Boolean,
 
   vertical: Boolean,
@@ -113,9 +114,13 @@ export default function ({ updateValue, updatePosition, getDragging }) {
   const step = computed(() => (props.step === 0 ? 1 : props.step))
   const minMaxDiff = computed(() => props.max - props.min)
 
+  const markerStep = computed(() => (
+    isNumber(props.markers) === true ? props.markers : step.value)
+  )
+
   const markerStyle = computed(() => {
     if (minMaxDiff.value !== 0) {
-      const size = 100 * step.value / minMaxDiff.value
+      const size = 100 * markerStep.value / minMaxDiff.value
 
       return {
         backgroundSize: props.vertical === true

package/src/components/space/QSpace.js

@@ -1,8 +1,10 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
+
+import { createComponent } from '../../utils/private/create.js'
 
 const space = h('div', { class: 'q-space' })
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpace',
 
   setup () {

package/src/components/spinner/QSpinner.js

@@ -1,8 +1,10 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QSpinner',
 
   props: {

package/src/components/spinner/QSpinnerAudio.js

@@ -1,7 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 const svg = [
   h('g', {
     transform: 'matrix(1 0 0 -1 0 80)'
@@ -68,7 +70,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerAudio',
 
   props: useSpinnerProps,