quasar 2.2.0 → 2.2.4

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 } ]\""
       ],

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: {

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,15 +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 useSize, { useSizeProps } from '../../composables/private/use-size.js'
+import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
+
+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'
 
-import useSize, { useSizeProps } from '../../composables/private/use-size.js'
-import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
-
-export default defineComponent({
+export default createComponent({
   name: 'QRating',
 
   props: {

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,
@@ -932,6 +933,12 @@ export default defineComponent({
     }
 
     function getAllOptions () {
+      if (noOptions.value === true) {
+        return slots[ 'no-option' ] !== void 0
+          ? slots[ 'no-option' ]({ inputValue: inputValue.value })
+          : void 0
+      }
+
       const fn = slots.option !== void 0
         ? slots.option
         : scope => {
@@ -1113,14 +1120,6 @@ export default defineComponent({
     }
 
     function getMenu () {
-      const child = noOptions.value === true
-        ? (
-            slots[ 'no-option' ] !== void 0
-              ? () => slots[ 'no-option' ]({ inputValue: inputValue.value })
-              : void 0
-          )
-        : getAllOptions
-
       return h(QMenu, {
         ref: menuRef,
         class: menuContentClass.value,
@@ -1145,7 +1144,7 @@ export default defineComponent({
         onBeforeShow: onControlPopupShow,
         onBeforeHide: onMenuBeforeHide,
         onShow: onMenuShow
-      }, child)
+      }, getAllOptions)
     }
 
     function onMenuBeforeHide (e) {
@@ -1202,15 +1201,7 @@ export default defineComponent({
           ...listboxAttrs.value,
           onClick: prevent,
           onScrollPassive: onVirtualScrollEvt
-        }, (
-          noOptions.value === true
-            ? (
-                slots[ 'no-option' ] !== void 0
-                  ? slots[ 'no-option' ]({ inputValue: inputValue.value })
-                  : null
-              )
-            : getAllOptions()
-        ))
+        }, getAllOptions())
       )
 
       return h(QDialog, {

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: {

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,