quasar 2.2.2 → 2.3.1

package/src/components/color/QColor.js

@@ -1,4 +1,4 @@
-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'
 
@@ -14,6 +14,7 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useCache from '../../composables/private/use-cache.js'
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { testPattern } from '../../utils/patterns.js'
 import throttle from '../../utils/throttle.js'
 import { stop } from '../../utils/event.js'
@@ -35,7 +36,7 @@ const palette = [
 
 const thumbPath = 'M5 5 h10 v10 h-10 v-10 z'
 
-export default defineComponent({
+export default createComponent({
   name: 'QColor',
 
   props: {

package/src/components/date/QDate.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, Transition, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, Transition, nextTick, getCurrentInstance } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 
@@ -7,6 +7,7 @@ import useCache from '../../composables/private/use-cache.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
 import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from './use-datetime.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { formatDate, __splitDate, getDateDiff } from '../../utils/date.js'
 import { pad } from '../../utils/format.js'
@@ -22,7 +23,7 @@ function getMonthHash (date) {
   return date.year + '/' + pad(date.month)
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QDate',
 
   props: {
@@ -800,8 +801,9 @@ export default defineComponent({
         return getDefaultViewModel()
       }
 
+      const target = model[ model.length - 1 ]
       const decoded = decodeString(
-        model[ 0 ].from !== void 0 ? model[ 0 ].from : model[ 0 ],
+        target.from !== void 0 ? target.from : target,
         mask,
         locale
       )

package/src/components/date/QDate.json

@@ -61,6 +61,17 @@
     "events": {
       "type": [ "Array", "Function" ],
       "desc": "A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not); If using a function then for best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current date will be highlighted"
+      },
       "examples": [
         ":events=\"['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']\"",
         ":events=\"date => date[9] % 3 === 0\""
@@ -71,6 +82,18 @@
     "event-color": {
       "type": [ "String", "Function" ],
       "desc": "Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "Color for the current date.",
+        "examples": [ "teal", "orange" ]
+      },
       "examples": [
         "teal-10",
         ":event-color=\"(date) => date[9] % 2 === 0 ? 'teal' : 'orange'\""
@@ -81,6 +104,17 @@
     "options": {
       "type": [ "Array", "Function" ],
       "desc": "Optionally configure the days that are selectable; If using a function, it receives the date as a String and must return a Boolean (is date acceptable or not); If using a function then for best performance, reference it from your scope and do not define it inline; Incompatible with 'range' prop",
+      "params": {
+        "date": {
+          "type": "String",
+          "desc": "The current date being processed.",
+          "examples": [ "2018/11/05", "2021/10/25" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current date will be made available for selection"
+      },
       "examples": [
         ":options=\"['2018/11/05', '2018/11/12', '2018/11/19', '2018/11/26' ]\"",
         ":options=\"date => date[9] % 3 === 0\"",

package/src/components/dialog/QDialog.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUnmount, nextTick, Transition, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onBeforeUnmount, nextTick, Transition, getCurrentInstance } from 'vue'
 
 import useHistory from '../../composables/private/use-history.js'
 import useTimeout from '../../composables/private/use-timeout.js'
@@ -8,6 +8,7 @@ import { useTransitionProps } from '../../composables/private/use-transition.js'
 import usePortal from '../../composables/private/use-portal.js'
 import usePreventScroll from '../../composables/private/use-prevent-scroll.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { childHasFocus } from '../../utils/dom.js'
 import { hSlot } from '../../utils/private/render.js'
 import { addEscapeKey, removeEscapeKey } from '../../utils/private/escape-key.js'
@@ -32,7 +33,7 @@ const transitions = {
   left: [ 'slide-right', 'slide-left' ]
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QDialog',
 
   inheritAttrs: false,

package/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, getCurrentInstance } from 'vue'
+import { h, ref, getCurrentInstance } from 'vue'
 
 import QDialog from '../dialog/QDialog.js'
 
@@ -11,9 +11,10 @@ import QCardSection from '../card/QCardSection.js'
 import QItem from '../item/QItem.js'
 import QItemSection from '../item/QItemSection.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'BottomSheetPlugin',
 
   props: {

package/src/components/dialog-plugin/DialogPlugin.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, toRaw, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, toRaw, getCurrentInstance } from 'vue'
 
 import QDialog from '../dialog/QDialog.js'
 import QBtn from '../btn/QBtn.js'
@@ -13,11 +13,12 @@ import QOptionGroup from '../option-group/QOptionGroup.js'
 
 import QSpinner from '../spinner/QSpinner.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import { isKeyCode } from '../../utils/private/key-composition.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'DialogPlugin',
 
   props: {

package/src/components/drawer/QDrawer.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, withDirectives, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, inject, getCurrentInstance } from 'vue'
+import { h, withDirectives, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, inject, getCurrentInstance } from 'vue'
 
 import useHistory from '../../composables/private/use-history.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
@@ -8,13 +8,14 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import TouchPan from '../../directives/TouchPan.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { hSlot, hDir } from '../../utils/private/render.js'
 import { layoutKey } from '../../utils/private/symbols.js'
 
 const duration = 150
 
-export default defineComponent({
+export default createComponent({
   name: 'QDrawer',
 
   inheritAttrs: false,

package/src/components/editor/QEditor.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue'
 
 import Caret from './editor-caret.js'
 import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
@@ -7,12 +7,13 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private/use-fullscreen.js'
 import useSplitAttrs from '../../composables/private/use-split-attrs.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import extend from '../../utils/extend.js'
 import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
 import { addFocusFn } from '../../utils/private/focus-manager.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QEditor',
 
   props: {

package/src/components/editor/QEditor.json

@@ -120,8 +120,12 @@
         },
         "disable": {
           "type": [ "Boolean", "Function" ],
-          "desc": "Is button disabled? If specifying a function, return a Boolean value.",
-          "examples": [ "() => this.userIsActive()" ]
+          "desc": "Is button disabled?",
+          "returns": {
+            "type": "Boolean",
+            "desc": "If true, the button will be disabled"
+          },
+          "examples": [ "!user.active", "() => !checkIfUserIsActive()" ]
         },
         "type": {
           "type": "String",

package/src/components/expansion-item/QExpansionItem.js

@@ -1,4 +1,4 @@
-import { h, shallowReactive, defineComponent, ref, computed, watch, withDirectives, getCurrentInstance, vShow, onBeforeUnmount } from 'vue'
+import { h, shallowReactive, ref, computed, watch, withDirectives, getCurrentInstance, vShow, onBeforeUnmount } from 'vue'
 
 import QItem from '../item/QItem.js'
 import QItemSection from '../item/QItemSection.js'
@@ -11,6 +11,7 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { hSlot } from '../../utils/private/render.js'
 import uid from '../../utils/uid.js'
@@ -18,7 +19,7 @@ import uid from '../../utils/uid.js'
 const itemGroups = shallowReactive({})
 const LINK_PROPS = Object.keys(useRouterLinkProps)
 
-export default defineComponent({
+export default createComponent({
   name: 'QExpansionItem',
 
   props: {

package/src/components/fab/QFab.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, provide, getCurrentInstance } from 'vue'
+import { h, ref, computed, provide, getCurrentInstance } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
@@ -6,13 +6,14 @@ import QIcon from '../icon/QIcon.js'
 import useFab, { useFabProps } from './use-fab.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 import { fabKey } from '../../utils/private/symbols.js'
 
 const directions = [ 'up', 'right', 'down', 'left' ]
 const alignValues = [ 'left', 'center', 'right' ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QFab',
 
   props: {

package/src/components/fab/QFabAction.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed, inject, getCurrentInstance } from 'vue'
+import { h, computed, inject, getCurrentInstance } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
 
 import useFab, { useFabProps } from './use-fab.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { fabKey } from '../../utils/private/symbols.js'
 import { hMergeSlot } from '../../utils/private/render.js'
 import { noop } from '../../utils/event.js'
@@ -17,7 +18,7 @@ const anchorMap = {
 
 const anchorValues = Object.keys(anchorMap)
 
-export default defineComponent({
+export default createComponent({
   name: 'QFabAction',
 
   props: {

package/src/components/field/QField.js

@@ -1,8 +1,8 @@
-import { defineComponent } from 'vue'
-
 import useField, { useFieldState, useFieldProps, useFieldEmits } from '../../composables/private/use-field.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QField',
 
   inheritAttrs: false,

package/src/components/file/QFile.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance } from 'vue'
 
 import QChip from '../chip/QChip.js'
 
@@ -7,9 +7,10 @@ import { useFormProps, useFormInputNameAttr } from '../../composables/private/us
 import useFile, { useFileProps, useFileEmits } from '../../composables/private/use-file.js'
 import useFileFormDomProps from '../../composables/private/use-file-dom-props.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { humanStorageSize } from '../../utils/format.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QFile',
 
   inheritAttrs: false,

package/src/components/footer/QFooter.js

@@ -1,13 +1,14 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUnmount, inject, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onBeforeUnmount, inject, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlot } from '../../utils/private/render.js'
 import { layoutKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QFooter',
 
   props: {

package/src/components/footer/QFooter.json

@@ -32,7 +32,7 @@
     },
 
     "height-hint": {
-      "type": [ "Number", "String " ],
+      "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter",
       "default": 50,
       "examples": [ "150" ],

package/src/components/form/QForm.js

@@ -1,11 +1,12 @@
-import { h, defineComponent, ref, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
+import { h, ref, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { addFocusFn } from '../../utils/private/focus-manager.js'
 import { hSlot } from '../../utils/private/render.js'
 import { formKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QForm',
 
   props: {

package/src/components/header/QHeader.js

@@ -1,11 +1,12 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUnmount, inject, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onBeforeUnmount, inject, getCurrentInstance } from 'vue'
 
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hUniqueSlot } from '../../utils/private/render.js'
 import { layoutKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QHeader',
 
   props: {

package/src/components/header/QHeader.json

@@ -42,7 +42,7 @@
     },
 
     "height-hint": {
-      "type": [ "Number", "String " ],
+      "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader",
       "default": 50,
       "examples": [ "150" ],

package/src/components/icon/QIcon.js

@@ -1,6 +1,8 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
+
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 
 const sameFn = i => i
@@ -33,7 +35,7 @@ const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
 const faLaRE = /^[l|f]a[s|r|l|b|d]? /
 
-export default defineComponent({
+export default createComponent({
   name: 'QIcon',
 
   props: {

package/src/components/img/QImg.js

@@ -1,13 +1,16 @@
-import { h, defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, Transition } from 'vue'
+import { h, ref, computed, watch, onMounted, onBeforeUnmount, Transition } from 'vue'
 
 import QSpinner from '../spinner/QSpinner.js'
+
 import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
+
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
 const defaultRatio = 16 / 9
 
-export default defineComponent({
+export default createComponent({
   name: 'QImg',
 
   props: {

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -1,12 +1,15 @@
-import { h, defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import debounce from '../../utils/debounce.js'
 import { height } from '../../utils/dom.js'
 import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVerticalScrollPosition } from '../../utils/scroll.js'
 import { listenOpts } from '../../utils/event.js'
 import { hSlot, hUniqueSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+const { passive } = listenOpts
+
+export default createComponent({
   name: 'QInfiniteScroll',
 
   props: {
@@ -33,20 +36,21 @@ export default defineComponent({
   emits: [ 'load' ],
 
   setup (props, { slots, emit }) {
-    const fetching = ref(false)
+    const isFetching = ref(false)
+    const isWorking = ref(true)
     const rootRef = ref(null)
 
     let index = props.initialIndex || 0
-    let isWorking = true
+    let scrollPos = false
     let localScrollTarget, poll
 
     const classes = computed(() =>
       'q-infinite-scroll__loading'
-      + (fetching.value === true ? '' : ' invisible')
+      + (isFetching.value === true ? '' : ' invisible')
     )
 
     function immediatePoll () {
-      if (props.disable === true || fetching.value === true || isWorking === false) {
+      if (props.disable === true || isFetching.value === true || isWorking.value === false) {
         return
       }
 
@@ -68,18 +72,18 @@ export default defineComponent({
     }
 
     function trigger () {
-      if (props.disable === true || fetching.value === true || isWorking === false) {
+      if (props.disable === true || isFetching.value === true || isWorking.value === false) {
         return
       }
 
       index++
-      fetching.value = true
+      isFetching.value = true
 
       const heightBefore = getScrollHeight(localScrollTarget)
 
       emit('load', index, isDone => {
-        if (isWorking === true) {
-          fetching.value = false
+        if (isWorking.value === true) {
+          isFetching.value = false
           nextTick(() => {
             if (props.reverse === true) {
               const
@@ -106,31 +110,31 @@ export default defineComponent({
     }
 
     function resume () {
-      if (isWorking === false) {
-        isWorking = true
-        localScrollTarget.addEventListener('scroll', poll, listenOpts.passive)
+      if (isWorking.value === false) {
+        isWorking.value = true
+        localScrollTarget.addEventListener('scroll', poll, passive)
       }
 
       immediatePoll()
     }
 
     function stop () {
-      if (isWorking === true) {
-        isWorking = false
-        fetching.value = false
-        localScrollTarget.removeEventListener('scroll', poll, listenOpts.passive)
+      if (isWorking.value === true) {
+        isWorking.value = false
+        isFetching.value = false
+        localScrollTarget.removeEventListener('scroll', poll, passive)
       }
     }
 
     function updateScrollTarget () {
-      if (localScrollTarget && isWorking === true) {
-        localScrollTarget.removeEventListener('scroll', poll, listenOpts.passive)
+      if (localScrollTarget && isWorking.value === true) {
+        localScrollTarget.removeEventListener('scroll', poll, passive)
       }
 
       localScrollTarget = getScrollTarget(rootRef.value, props.scrollTarget)
 
-      if (isWorking === true) {
-        localScrollTarget.addEventListener('scroll', poll, listenOpts.passive)
+      if (isWorking.value === true) {
+        localScrollTarget.addEventListener('scroll', poll, passive)
       }
     }
 
@@ -154,30 +158,44 @@ export default defineComponent({
         ? immediatePoll
         : debounce(immediatePoll, isNaN(val) === true ? 100 : val)
 
-      if (localScrollTarget && isWorking === true) {
+      if (localScrollTarget && isWorking.value === true) {
         if (oldPoll !== void 0) {
-          localScrollTarget.removeEventListener('scroll', oldPoll, listenOpts.passive)
+          localScrollTarget.removeEventListener('scroll', oldPoll, passive)
         }
 
-        localScrollTarget.addEventListener('scroll', poll, listenOpts.passive)
+        localScrollTarget.addEventListener('scroll', poll, passive)
       }
     }
 
     watch(() => props.disable, val => {
-      if (val === true) {
-        stop()
-      }
-      else {
-        resume()
+      if (val === true) { stop() }
+      else { resume() }
+    })
+
+    watch(() => props.reverse, val => {
+      if (isFetching.value === false && isWorking.value === true) {
+        immediatePoll()
       }
     })
 
     watch(() => props.scrollTarget, updateScrollTarget)
     watch(() => props.debounce, setDebounce)
 
+    onActivated(() => {
+      if (localScrollTarget && scrollPos !== false) {
+        setVerticalScrollPosition(localScrollTarget, scrollPos)
+      }
+    })
+
+    onDeactivated(() => {
+      scrollPos = localScrollTarget
+        ? getVerticalScrollPosition(localScrollTarget)
+        : false
+    })
+
     onBeforeUnmount(() => {
-      if (isWorking === true) {
-        localScrollTarget.removeEventListener('scroll', poll, listenOpts.passive)
+      if (isWorking.value === true) {
+        localScrollTarget.removeEventListener('scroll', poll, passive)
       }
     })
 
@@ -200,7 +218,7 @@ export default defineComponent({
     return () => {
       const child = hUniqueSlot(slots.default, [])
 
-      if (props.disable !== true && isWorking === true) {
+      if (props.disable !== true && isWorking.value === true) {
         child[ props.reverse === false ? 'push' : 'unshift' ](
           h('div', { class: classes.value }, hSlot(slots.loading))
         )

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

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,