quasar 2.2.2 → 2.3.1

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

@@ -95,13 +95,14 @@
       "params": {
         "info": {
           "type": "Object",
-          "__exemption": [ "examples" ],
+          "desc": "An object containing scroll information",
           "definition": {
             "ref": {
               "type": "Object",
               "desc": "Vue reference to the QScrollArea which triggered the event",
               "__exemption": [ "examples" ]
             },
+
             "verticalPosition": {
               "type": "Number",
               "desc": "Vertical scroll position (in px)",
@@ -215,6 +216,7 @@
       "desc": "Get current scroll position",
       "returns": {
         "type": "Object",
+        "desc": "An object containing scroll position information",
         "definition": {
           "top": {
             "type": "Number",
@@ -235,6 +237,7 @@
       "desc": "Get current scroll position in percentage (0.0 <= x <= 1.0)",
       "returns": {
         "type": "Object",
+        "desc": "An object containing scroll position information in percentage",
         "definition": {
           "top": {
             "type": "Number",

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, {
@@ -1348,14 +1339,14 @@ export default defineComponent({
     function onControlPopupShow (e) {
       e !== void 0 && stop(e)
       emit('popup-show', e)
-      state.hasPopupOpen.value = true
+      state.hasPopupOpen = true
       state.onControlFocusin(e)
     }
 
     function onControlPopupHide (e) {
       e !== void 0 && stop(e)
       emit('popup-hide', e)
-      state.hasPopupOpen.value = false
+      state.hasPopupOpen = false
       state.onControlFocusout(e)
     }
 
@@ -1427,6 +1418,10 @@ export default defineComponent({
         ) {
           return hasDialog === true ? getDialog() : getMenu()
         }
+        else if (state.hasPopupOpen === true) {
+          // explicitly set it otherwise TAB will not blur component
+          state.hasPopupOpen = false
+        }
       },
 
       controlEvents: {

package/src/components/select/QSelect.json

@@ -47,6 +47,22 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "value",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "Any",
+        "desc": "Value of the current option",
+        "examples": [ "'car'", "34" ]
+      },
       "examples": [
         "option-value=\"modelNumber\"",
         ":option-value=\"(item) => item === null ? null : item.modelNumber\""
@@ -58,6 +74,22 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "label",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "Label of the current option",
+        "examples": [ "'BMW'", "'Samsung Phone'" ]
+      },
       "examples": [
         "option-label=\"itemName\"",
         ":option-label=\"(item) => item === null ? 'Null value' : item.itemName\""
@@ -69,6 +101,21 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "disable",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current option will be disabled"
+      },
       "examples": [
         "option-disable=\"cannotSelect\"",
         ":option-disable=\"(item) => item === null ? true : item.cannotSelect\""

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/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/skeleton/QSkeleton.json

@@ -33,11 +33,8 @@
     },
 
     "animation-speed": {
-      "type": [ "String", "Number" ],
-      "desc": "Animation speed (in milliseconds, without unit)",
+      "extends": "animation-speed",
       "default": 300,
-      "examples": [ 500, "1200" ],
-      "category": "style",
       "addedIn": "v2.2"
     },
 

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

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

@@ -210,7 +210,7 @@ export default function ({ updateValue, updatePosition, getDragging }) {
   }
 
   function onPan (event) {
-    if (event.isFinal) {
+    if (event.isFinal === true) {
       if (dragging.value !== void 0) {
         updatePosition(event.evt)
         // only if touch, because we also have mousedown/up:
@@ -220,7 +220,7 @@ export default function ({ updateValue, updatePosition, getDragging }) {
       }
       active.value = false
     }
-    else if (event.isFirst) {
+    else if (event.isFirst === true) {
       dragging.value = getDragging(event.evt)
       updatePosition(event.evt)
       updateValue()
@@ -250,7 +250,7 @@ export default function ({ updateValue, updatePosition, getDragging }) {
   function onDeactivate () {
     preventFocus.value = false
 
-    if (dragging.value === void 0) {
+    if (dragging.value === false) {
       active.value = false
     }
 

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,

package/src/components/spinner/QSpinnerBall.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: 'translate(1 1)',
@@ -84,7 +86,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerBall',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerBars.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('rect', {
     y: '10',
@@ -123,7 +125,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerBars',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerBox.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('rect', {
     x: '25',
@@ -41,7 +43,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerBox',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerClock.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('circle', {
     cx: '50',
@@ -52,7 +54,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerClock',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerComment.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('rect', {
     x: '0',
@@ -64,7 +66,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerComment',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerCube.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('rect', {
     x: '0',
@@ -112,7 +114,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerCube',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerDots.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('circle', {
     cx: '15',
@@ -84,7 +86,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerDots',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerFacebook.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: 'translate(20 50)'
@@ -83,7 +85,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerFacebook',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerGears.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: 'translate(-20,-20)'
@@ -39,7 +41,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerGears',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerGrid.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('circle', {
     cx: '12.5',
@@ -132,7 +134,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerGrid',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerHearts.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('path', {
     d: 'M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z',
@@ -34,7 +36,7 @@ const svg = [
   })
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerHearts',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerHourglass.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', [
     h('path', {
@@ -92,7 +94,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerHourglass',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerInfinity.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('path', {
     d: 'M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z',
@@ -23,7 +25,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerInfinity',
 
   props: useSpinnerProps,