quasar 2.1.9 → 2.2.3

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

@@ -1,11 +1,12 @@
-import { h, defineComponent, computed, Transition, getCurrentInstance } from 'vue'
+import { h, computed, Transition, getCurrentInstance } from 'vue'
 
 import QSpinner from '../spinner/QSpinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QInnerLoading',
 
   props: {
@@ -18,7 +19,11 @@ export default defineComponent({
     size: {
       type: [ String, Number ],
       default: 42
-    }
+    },
+
+    label: String,
+    labelClass: String,
+    labelStyle: [ String, Array, Object ]
   },
 
   setup (props, { slots }) {
@@ -32,6 +37,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 +69,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/input/QInput.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUnmount, onMounted, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onBeforeUnmount, onMounted, nextTick, getCurrentInstance } from 'vue'
 
 import useField, { useFieldState, useFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private/use-field.js'
 import useMask, { useMaskProps } from './use-mask.js'
@@ -6,10 +6,11 @@ import { useFormProps, useFormInputNameAttr } from '../../composables/private/us
 import useFileFormDomProps from '../../composables/private/use-file-dom-props.js'
 import useKeyComposition from '../../composables/private/use-key-composition.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stop } from '../../utils/event.js'
 import { addFocusFn } from '../../utils/private/focus-manager.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QInput',
 
   inheritAttrs: false,

package/src/components/intersection/QIntersection.js

@@ -1,12 +1,13 @@
-import { h, defineComponent, ref, computed, Transition } from 'vue'
+import { h, ref, computed, Transition } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
 import Intersection from '../../directives/Intersection.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hDir } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QIntersection',
 
   props: {

package/src/components/item/QItem.js

@@ -1,13 +1,14 @@
-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 useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hUniqueSlot } from '../../utils/private/render.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { isKeyCode } from '../../utils/private/key-composition.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QItem',
 
   props: {

package/src/components/item/QItemLabel.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QItemLabel',
 
   props: {

package/src/components/item/QItemSection.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QItemSection',
 
   props: {

package/src/components/item/QList.js

@@ -1,10 +1,10 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QList',
 
   props: {

package/src/components/knob/QKnob.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, ref, computed, watch, onMounted, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, withDirectives, getCurrentInstance } from 'vue'
 
 import QCircularProgress from '../circular-progress/QCircularProgress.js'
 import TouchPan from '../../directives/TouchPan.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { position, stopAndPrevent } from '../../utils/event.js'
 import { between, normalizeToInterval } from '../../utils/format.js'
 
@@ -13,7 +14,7 @@ import { useCircularCommonProps } from '../circular-progress/use-circular-progre
 const keyCodes = [ 34, 37, 40, 33, 39, 38 ]
 const commonPropsName = Object.keys(useCircularCommonProps)
 
-export default defineComponent({
+export default createComponent({
   name: 'QKnob',
 
   props: {

package/src/components/layout/QLayout.js

@@ -1,15 +1,16 @@
-import { h, defineComponent, ref, reactive, computed, provide, getCurrentInstance } from 'vue'
+import { h, ref, reactive, computed, provide, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
 import QScrollObserver from '../scroll-observer/QScrollObserver.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { getScrollbarWidth } from '../../utils/scroll.js'
 import { hMergeSlot } from '../../utils/private/render.js'
 import { layoutKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QLayout',
 
   props: {

package/src/components/linear-progress/QLinearProgress.js

@@ -1,8 +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 useSize, { useSizeProps } from '../../composables/private/use-size.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlot } from '../../utils/private/render.js'
 
 const defaultSizes = {
@@ -21,7 +22,7 @@ function width (val, reverse, $q) {
   }
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QLinearProgress',
 
   props: {

package/src/components/markup-table/QMarkupTable.js

@@ -1,12 +1,13 @@
-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'
 
 const separatorValues = [ 'horizontal', 'vertical', 'cell', 'none' ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QMarkupTable',
 
   props: {

package/src/components/menu/QMenu.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, Transition, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, Transition, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
 import useScrollTarget from '../../composables/private/use-scroll-target.js'
@@ -9,6 +9,7 @@ import useTransition, { useTransitionProps } from '../../composables/private/use
 import useTick from '../../composables/private/use-tick.js'
 import useTimeout from '../../composables/private/use-timeout.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { closePortalMenus } from '../../utils/private/portal.js'
 import { getScrollTarget } from '../../utils/scroll.js'
 import { position, stopAndPrevent } from '../../utils/event.js'
@@ -17,13 +18,13 @@ import { addEscapeKey, removeEscapeKey } from '../../utils/private/escape-key.js
 import { addFocusout, removeFocusout } from '../../utils/private/focusout.js'
 import { childHasFocus } from '../../utils/dom.js'
 import { addClickOutside, removeClickOutside } from '../../utils/private/click-outside.js'
+import { addFocusFn } from '../../utils/private/focus-manager.js'
 
 import {
   validatePosition, validateOffset, setPosition, parsePosition
 } from '../../utils/private/position-engine.js'
-import { addFocusFn } from '../../utils/private/focus-manager.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QMenu',
 
   inheritAttrs: false,

package/src/components/no-ssr/QNoSsr.js

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

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

@@ -1,9 +1,11 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
 import QRadio from '../radio/QRadio.js'
 import QCheckbox from '../checkbox/QCheckbox.js'
 import QToggle from '../toggle/QToggle.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 const components = {
@@ -14,7 +16,7 @@ const components = {
 
 const typeValues = Object.keys(components)
 
-export default defineComponent({
+export default createComponent({
   name: 'QOptionGroup',
 
   props: {
@@ -48,7 +50,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 +94,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/page/QPage.js

@@ -1,9 +1,10 @@
-import { h, defineComponent, computed, inject, getCurrentInstance } from 'vue'
+import { h, computed, inject, getCurrentInstance } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { pageContainerKey, layoutKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QPage',
 
   props: {

package/src/components/page/QPageContainer.js

@@ -1,9 +1,10 @@
-import { h, defineComponent, computed, provide, inject, getCurrentInstance } from 'vue'
+import { h, computed, provide, inject, getCurrentInstance } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { pageContainerKey, layoutKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QPageContainer',
 
   setup (_, { slots }) {

package/src/components/page-scroller/QPageScroller.js

@@ -1,9 +1,11 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUnmount, getCurrentInstance, Transition } from 'vue'
+import { h, ref, computed, watch, onBeforeUnmount, getCurrentInstance, Transition } from 'vue'
 
 import usePageSticky, { usePageStickyProps } from '../page-sticky/use-page-sticky.js'
 import { getScrollTarget, setVerticalScrollPosition } from '../../utils/scroll.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QPageScroller',
 
   props: {

package/src/components/page-sticky/QPageSticky.js

@@ -1,8 +1,7 @@
-import { defineComponent } from 'vue'
-
+import { createComponent } from '../../utils/private/create.js'
 import usePageSticky, { usePageStickyProps } from './use-page-sticky'
 
-export default defineComponent({
+export default createComponent({
   name: 'QPageSticky',
 
   props: usePageStickyProps,

package/src/components/pagination/QPagination.js

@@ -1,14 +1,15 @@
-import { h, defineComponent, ref, watch, computed, getCurrentInstance } from 'vue'
+import { h, ref, watch, computed, getCurrentInstance } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import QInput from '../input/QInput.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { isKeyCode } from '../../utils/private/key-composition.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QPagination',
 
   props: {

package/src/components/parallax/QParallax.js

@@ -1,5 +1,6 @@
-import { h, defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { h, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { height, offset } from '../../utils/dom.js'
 import frameDebounce from '../../utils/frame-debounce.js'
 import { getScrollTarget } from '../../utils/scroll.js'
@@ -8,7 +9,7 @@ import { listenOpts } from '../../utils/event.js'
 
 const { passive } = listenOpts
 
-export default defineComponent({
+export default createComponent({
   name: 'QParallax',
 
   props: {

package/src/components/popup-edit/QPopupEdit.js

@@ -1,12 +1,13 @@
-import { h, defineComponent, ref, computed, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, nextTick, getCurrentInstance } from 'vue'
 
 import QMenu from '../menu/QMenu.js'
 import QBtn from '../btn/QBtn.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import clone from '../../utils/clone.js'
 import { isDeepEqual } from '../../utils/private/is.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QPopupEdit',
 
   props: {

package/src/components/popup-proxy/QPopupProxy.js

@@ -1,12 +1,14 @@
-import { h, defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
 import QDialog from '../dialog/QDialog.js'
 import QMenu from '../menu/QMenu.js'
 
 import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
+
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QPopupProxy',
 
   props: {

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -1,9 +1,10 @@
-import { h, defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QSpinner from '../spinner/QSpinner.js'
 import TouchPan from '../../directives/TouchPan.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { getScrollTarget, getVerticalScrollPosition } from '../../utils/scroll.js'
 import { between } from '../../utils/format.js'
 import { prevent } from '../../utils/event.js'
@@ -13,7 +14,7 @@ const
   PULLER_HEIGHT = 40,
   OFFSET_TOP = 20
 
-export default defineComponent({
+export default createComponent({
   name: 'QPullToRefresh',
 
   props: {