quasar 2.2.1 → 2.3.0

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/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,

package/src/components/spinner/QSpinnerIos.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', {
     'stroke-width': '4',
@@ -154,7 +156,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerIos',
 
   props: useSpinnerProps,

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

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

package/src/components/spinner/QSpinnerPie.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: 'M0 50A50 50 0 0 1 50 0L50 50L0 50',
@@ -61,7 +63,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerPie',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerPuff.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', {
     fill: 'none',
@@ -63,7 +65,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerPuff',
 
   props: useSpinnerProps,

package/src/components/spinner/QSpinnerRadio.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: 'scale(0.55)'
@@ -56,7 +58,7 @@ const svg = [
   ])
 ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QSpinnerRadio',
 
   props: useSpinnerProps,

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

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

package/src/components/splitter/QSplitter.js

@@ -1,12 +1,13 @@
-import { h, defineComponent, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
 
 import TouchPan from '../../directives/TouchPan.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot, hDir } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QSplitter',
 
   props: {

package/src/components/stepper/QStep.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, nextTick, inject, KeepAlive } from 'vue'
+import { h, ref, computed, watch, nextTick, inject, KeepAlive } from 'vue'
 
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import StepHeader from './StepHeader.js'
@@ -6,6 +6,7 @@ import StepHeader from './StepHeader.js'
 import { usePanelChildProps } from '../../composables/private/use-panel.js'
 import useCache from '../../composables/private/use-cache.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stepperKey } from '../../utils/private/symbols.js'
 import { hSlot } from '../../utils/private/render.js'
 
@@ -25,7 +26,7 @@ const PanelWrapper = {
   }
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QStep',
 
   props: {

package/src/components/stepper/QStepper.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed, provide, getCurrentInstance } from 'vue'
+import { h, computed, provide, getCurrentInstance } from 'vue'
 
 import StepHeader from './StepHeader.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private/use-panel.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stepperKey } from '../../utils/private/symbols.js'
 import { hSlot, hMergeSlot, hDir } from '../../utils/private/render.js'
 
@@ -19,7 +20,7 @@ function camelizeProps (props) {
   return acc
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QStepper',
 
   props: {

package/src/components/stepper/QStepperNavigation.js

@@ -1,8 +1,9 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QStepperNavigation',
 
   setup (_, { slots }) {

package/src/components/stepper/StepHeader.js

@@ -1,9 +1,11 @@
-import { h, defineComponent, ref, computed, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import Ripple from '../../directives/Ripple.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'StepHeader',
 
   props: {