quasar 2.1.9 → 2.2.0

package/src/components/carousel/QCarousel.json

@@ -40,7 +40,7 @@
 
     "autoplay": {
       "type": [ "Number", "Boolean" ],
-      "desc": "Jump to next slide at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals",
+      "desc": "Jump to next slide (if 'true' or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals",
       "default": false,
       "examples": [
         ":autoplay=\"2500\"",
@@ -92,6 +92,14 @@
       "type": "Boolean",
       "desc": "Show thumbnails",
       "category": "content"
+    },
+
+    "transition-prev": {
+      "default": "fade"
+    },
+
+    "transition-next": {
+      "default": "fade"
     }
   },
 

package/src/components/color/QColor.js

@@ -60,6 +60,7 @@ export default defineComponent({
     palette: Array,
 
     noHeader: Boolean,
+    noHeaderTabs: Boolean,
     noFooter: Boolean,
 
     square: Boolean,
@@ -145,7 +146,7 @@ export default defineComponent({
         ? true
         : luminosity(model.value) > 0.4
 
-      return 'q-color-picker__header-content absolute-full'
+      return 'q-color-picker__header-content'
         + ` q-color-picker__header-content--${ light ? 'light' : 'dark' }`
     })
 
@@ -496,6 +497,63 @@ export default defineComponent({
     }
 
     function getHeader () {
+      const child = []
+
+      props.noHeaderTabs !== true && child.push(
+        h(QTabs, {
+          class: 'q-color-picker__header-tabs',
+          modelValue: topView.value,
+          dense: true,
+          align: 'justify',
+          ...getCache('topVTab', {
+            'onUpdate:modelValue': val => { topView.value = val }
+          })
+        }, () => [
+          h(QTab, {
+            label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
+            name: 'hex',
+            ripple: false
+          }),
+
+          h(QTab, {
+            label: 'RGB' + (hasAlpha.value === true ? 'A' : ''),
+            name: 'rgb',
+            ripple: false
+          })
+        ])
+      )
+
+      child.push(
+        h('div', {
+          class: 'q-color-picker__header-banner row flex-center no-wrap'
+        }, [
+          h('input', {
+            class: 'fit',
+            value: model.value[ topView.value ],
+            ...(editable.value !== true
+              ? { readonly: true }
+              : {}
+            ),
+            ...getCache('topIn', {
+              onInput: evt => {
+                updateErrorIcon(onEditorChange(evt) === true)
+              },
+              onChange: stop,
+              onBlur: evt => {
+                onEditorChange(evt, true) === true && proxy.$forceUpdate()
+                updateErrorIcon(false)
+              }
+            })
+          }),
+
+          h(QIcon, {
+            ref: errorIconRef,
+            class: 'q-color-picker__error-icon absolute no-pointer-events',
+            name: $q.iconSet.type.negative
+          })
+        ])
+      )
+
       return h('div', {
         class: 'q-color-picker__header relative-position overflow-hidden'
       }, [
@@ -504,57 +562,7 @@ export default defineComponent({
         h('div', {
           class: headerClass.value,
           style: currentBgColor.value
-        }, [
-          h(QTabs, {
-            modelValue: topView.value,
-            dense: true,
-            align: 'justify',
-            ...getCache('topVTab', {
-              'onUpdate:modelValue': val => { topView.value = val }
-            })
-          }, () => [
-            h(QTab, {
-              label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
-              name: 'hex',
-              ripple: false
-            }),
-
-            h(QTab, {
-              label: 'RGB' + (hasAlpha.value === true ? 'A' : ''),
-              name: 'rgb',
-              ripple: false
-            })
-          ]),
-
-          h('div', {
-            class: 'q-color-picker__header-banner row flex-center no-wrap'
-          }, [
-            h('input', {
-              class: 'fit',
-              value: model.value[ topView.value ],
-              ...(editable.value !== true
-                ? { readonly: true }
-                : {}
-              ),
-              ...getCache('topIn', {
-                onInput: evt => {
-                  updateErrorIcon(onEditorChange(evt) === true)
-                },
-                onChange: stop,
-                onBlur: evt => {
-                  onEditorChange(evt, true) === true && proxy.$forceUpdate()
-                  updateErrorIcon(false)
-                }
-              })
-            }),
-
-            h(QIcon, {
-              ref: errorIconRef,
-              class: 'q-color-picker__error-icon absolute no-pointer-events',
-              name: $q.iconSet.type.negative
-            })
-          ])
-        ])
+        }, child)
       ])
     }
 
@@ -790,19 +798,23 @@ export default defineComponent({
     }
 
     function getPaletteTab () {
+      const fn = color => h('div', {
+        class: 'q-color-picker__cube col-auto',
+        style: { backgroundColor: color },
+        ...(
+          editable.value === true
+            ? getCache('palette#' + color, {
+              onClick: () => { onPalettePick(color) }
+            })
+            : {}
+        )
+      })
+
       return [
         h('div', {
           class: 'row items-center q-color-picker__palette-rows'
             + (editable.value === true ? ' q-color-picker__palette-rows--editable' : '')
-        }, computedPalette.value.map(color => h('div', {
-          class: 'q-color-picker__cube col-auto',
-          style: { backgroundColor: color },
-          ...(editable.value === true ? getCache('palette#' + color, {
-            onClick: () => {
-              onPalettePick(color)
-            }
-          }) : {})
-        })))
+        }, computedPalette.value.map(fn))
       ]
     }
 

package/src/components/color/QColor.json

@@ -64,6 +64,13 @@
       "category": "content"
     },
 
+    "no-header-tabs": {
+      "type": "Boolean",
+      "desc": "Do not render header tabs (only the input)",
+      "category": "content",
+      "addedIn": "v2.2"
+    },
+
     "no-footer": {
       "type": "Boolean",
       "desc": "Do not render footer; Useful when you want a specific view ('default-view' prop) and don't want the user to be able to switch it",

package/src/components/color/QColor.sass

@@ -16,7 +16,11 @@
     border: 1px solid $separator-color
 
   &__header
-    height: 68px
+
+    &-tabs
+      height: 32px
+    &-banner
+      height: 36px
 
     input
       line-height: 24px

package/src/components/dialog/QDialog.js

@@ -135,6 +135,10 @@ export default defineComponent({
         : transitionShow.value
     ))
 
+    const transitionStyle = computed(
+      () => `--q-transition-duration: ${ props.transitionDuration }ms`
+    )
+
     const useBackdrop = computed(() => showing.value === true && props.seamless !== true)
 
     const onEvents = computed(() => (
@@ -375,6 +379,7 @@ export default defineComponent({
           useBackdrop.value === true
             ? h('div', {
                 class: 'q-dialog__backdrop fixed-full',
+                style: transitionStyle.value,
                 'aria-hidden': 'true',
                 onMousedown: onBackdropClick
               })
@@ -389,6 +394,7 @@ export default defineComponent({
               ? h('div', {
                   ref: innerRef,
                   class: classes.value,
+                  style: transitionStyle.value,
                   tabindex: -1,
                   ...onEvents.value
                 }, hSlot(slots.default))

package/src/components/inner-loading/QInnerLoading.js

@@ -18,7 +18,11 @@ export default defineComponent({
     size: {
       type: [ String, Number ],
       default: 42
-    }
+    },
+
+    label: String,
+    labelClass: String,
+    labelStyle: [ String, Array, Object ]
   },
 
   setup (props, { slots }) {
@@ -32,6 +36,31 @@ export default defineComponent({
       + (isDark.value === true ? ' q-inner-loading--dark' : '')
     )
 
+    const labelClass = computed(() =>
+      'q-inner-loading__label'
+      + (props.labelClass !== void 0 ? ` ${ props.labelClass}` : '')
+    )
+
+    function getInner () {
+      const child = [
+        h(QSpinner, {
+          size: props.size,
+          color: props.color
+        })
+      ]
+
+      if (props.label !== void 0) {
+        child.push(
+          h('div', {
+            class: labelClass.value,
+            style: props.labelStyle
+          }, [ props.label ])
+        )
+      }
+
+      return child
+    }
+
     function getContent () {
       return props.showing === true
         ? h(
@@ -39,12 +68,7 @@ export default defineComponent({
             { class: classes.value, style: transitionStyle.value },
             slots.default !== void 0
               ? slots.default()
-              : [
-                  h(QSpinner, {
-                    size: props.size,
-                    color: props.color
-                  })
-                ]
+              : getInner()
           )
         : null
     }

package/src/components/inner-loading/QInnerLoading.json

@@ -22,6 +22,35 @@
       "default": "42px"
     },
 
+    "label": {
+      "type": "String",
+      "desc": "Add a label; Gets overriden when using the default slot",
+      "examples": [ "Please wait..." ],
+      "category": "label",
+      "addedIn": "v2.2"
+    },
+
+    "label-class": {
+      "type": "String",
+      "desc": "Add CSS class(es) to the label; Works along the 'label' prop only",
+      "examples": [
+        "text-red q-mt-xl"
+      ],
+      "category": "label",
+      "addedIn": "v2.2"
+    },
+
+    "label-style": {
+      "type": [ "Array", "String", "Object" ],
+      "desc": "Apply custom style to the label; Works along the 'label' prop only",
+      "examples": [
+        "font-size: 28px",
+        ":label-style=\"{ color: '#ff0000' }\""
+      ],
+      "category": "label",
+      "addedIn": "v2.2"
+    },
+
     "dark": {
       "extends": "dark"
     }

package/src/components/inner-loading/QInnerLoading.sass

@@ -1,4 +1,8 @@
 .q-inner-loading
   background: $light-dimmed-background
+
   &--dark
     background: $dimmed-background
+
+  &__label
+    margin-top: 8px

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

@@ -72,6 +72,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/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/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"
     },