quasar 2.1.8 → 2.2.2

package/src/components/option-group/QOptionGroup.js

@@ -48,7 +48,7 @@ export default defineComponent({
 
   emits: [ 'update:modelValue' ],
 
-  setup (props, { emit }) {
+  setup (props, { emit, slots }) {
     const { proxy: { $q } } = getCurrentInstance()
 
     const arrayModel = Array.isArray(props.modelValue)
@@ -92,23 +92,33 @@ export default defineComponent({
     return () => h('div', {
       class: classes.value,
       ...attrs.value
-    }, props.options.map(opt => h('div', [
-      h(component.value, {
-        modelValue: props.modelValue,
-        val: opt.value,
-        name: opt.name === void 0 ? props.name : opt.name,
-        disable: props.disable || opt.disable,
-        label: opt.label,
-        leftLabel: opt.leftLabel === void 0 ? props.leftLabel : opt.leftLabel,
-        color: opt.color === void 0 ? props.color : opt.color,
-        checkedIcon: opt.checkedIcon,
-        uncheckedIcon: opt.uncheckedIcon,
-        dark: opt.dark || isDark.value,
-        size: opt.size === void 0 ? props.size : opt.size,
-        dense: props.dense,
-        keepColor: opt.keepColor === void 0 ? props.keepColor : opt.keepColor,
-        'onUpdate:modelValue': onUpdateModelValue
-      })
-    ])))
+    }, props.options.map((opt, i) => {
+      const child = slots[ 'label-' + i ] !== void 0
+        ? () => slots[ 'label-' + i ](opt)
+        : (
+            slots.label !== void 0
+              ? () => slots.label(opt)
+              : void 0
+          )
+
+      return h('div', [
+        h(component.value, {
+          modelValue: props.modelValue,
+          val: opt.value,
+          name: opt.name === void 0 ? props.name : opt.name,
+          disable: props.disable || opt.disable,
+          label: child === void 0 ? opt.label : null,
+          leftLabel: opt.leftLabel === void 0 ? props.leftLabel : opt.leftLabel,
+          color: opt.color === void 0 ? props.color : opt.color,
+          checkedIcon: opt.checkedIcon,
+          uncheckedIcon: opt.uncheckedIcon,
+          dark: opt.dark || isDark.value,
+          size: opt.size === void 0 ? props.size : opt.size,
+          dense: props.dense,
+          keepColor: opt.keepColor === void 0 ? props.keepColor : opt.keepColor,
+          'onUpdate:modelValue': onUpdateModelValue
+        }, child)
+      ])
+    }))
   }
 })

package/src/components/option-group/QOptionGroup.json

@@ -14,7 +14,30 @@
 
     "options": {
       "type": "Array",
-      "desc": "Array of objects with value and label props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
+      "desc": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
+      "definition": {
+        "label": {
+          "type": "String",
+          "desc": "Label to display along the component",
+          "required": true,
+          "examples": [ "Option 1", "Option 2", "Option 3" ]
+        },
+        "value": {
+          "type": "Any",
+          "desc": "Value of the option that will be used by the component model",
+          "required": true,
+          "examples": [ "op1", "op2", "op3" ]
+        },
+        "disable": {
+          "type": "Boolean",
+          "desc": "If true, the option will be disabled"
+        },
+        "...props": {
+          "type": "Any",
+          "desc": "Any other props from QToggle, QCheckbox, or QRadio",
+          "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
+        }
+      },
       "examples": [
         ":options=\"[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]\""
       ],
@@ -72,6 +95,32 @@
     }
   },
 
+  "slots": {
+    "label": {
+      "desc": "Generic slot for all labels",
+      "scope": {
+        "opt": {
+          "type": "Object",
+          "desc": "The corresponding option entry from the 'options' prop",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "addedIn": "v2.2"
+    },
+
+    "label-[name]": {
+      "desc": "Slot to define the specific label for the option at '[name]' where name is a 0-based index; Overrides the generic 'label' slot if used",
+      "scope": {
+        "...opt": {
+          "type": "Object",
+          "desc": "The corresponding option entry from the 'options' prop",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "addedIn": "v2.2"
+    }
+  },
+
   "events": {
     "update:model-value": {
       "extends": "update:model-value"

package/src/components/range/QRange.js

@@ -488,7 +488,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

@@ -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

@@ -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',

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

@@ -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.js

@@ -206,7 +206,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/stepper/StepHeader.js

@@ -1,10 +1,8 @@
-import { h, defineComponent, ref, computed, getCurrentInstance } from 'vue'
+import { h, defineComponent, ref, computed, withDirectives, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import Ripple from '../../directives/Ripple.js'
 
-import { hDir } from '../../utils/private/render.js'
-
 export default defineComponent({
   name: 'StepHeader',
 
@@ -97,6 +95,12 @@ export default defineComponent({
         + (isDisable.value === true ? ' q-stepper__tab--disabled' : '')
     })
 
+    const ripple = computed(() => (
+      props.stepper.headerNav !== true
+        ? false
+        : headerNav.value
+    ))
+
     function onActivate () {
       blurRef.value !== null && blurRef.value.focus()
       isActive.value === false && props.goToPanel(props.step.name)
@@ -152,13 +156,9 @@ export default defineComponent({
         )
       }
 
-      return hDir(
-        'div',
-        data,
-        child,
-        'head',
-        props.stepper.headerNav === true && headerNav.value !== false,
-        () => [ [ Ripple, headerNav.value ] ]
+      return withDirectives(
+        h('div', data, child),
+        [ [ Ripple, ripple.value ] ]
       )
     }
   }

package/src/components/table/QTable.json

@@ -156,6 +156,7 @@
         "align": {
           "type": "String",
           "desc": "Horizontal alignment of cells in this column",
+          "values": [ "left", "right", "center" ],
           "default": "right",
           "examples": [ "left", "right", "center" ]
         },

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

@@ -288,8 +288,6 @@ export default defineComponent({
         defaultDateModel.value
       )
 
-      console.log({ ...model })
-
       if (
         model.dateHash !== innerModel.value.dateHash
         || model.timeHash !== innerModel.value.timeHash

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