quasar 2.1.9 → 2.2.3

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: {
@@ -60,6 +61,7 @@ export default defineComponent({
     palette: Array,
 
     noHeader: Boolean,
+    noHeaderTabs: Boolean,
     noFooter: Boolean,
 
     square: Boolean,
@@ -145,7 +147,7 @@ export default defineComponent({
         ? true
         : luminosity(model.value) > 0.4
 
-      return 'q-color-picker__header-content absolute-full'
+      return 'q-color-picker__header-content'
         + ` q-color-picker__header-content--${ light ? 'light' : 'dark' }`
     })
 
@@ -496,6 +498,63 @@ export default defineComponent({
     }
 
     function getHeader () {
+      const child = []
+
+      props.noHeaderTabs !== true && child.push(
+        h(QTabs, {
+          class: 'q-color-picker__header-tabs',
+          modelValue: topView.value,
+          dense: true,
+          align: 'justify',
+          ...getCache('topVTab', {
+            'onUpdate:modelValue': val => { topView.value = val }
+          })
+        }, () => [
+          h(QTab, {
+            label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
+            name: 'hex',
+            ripple: false
+          }),
+
+          h(QTab, {
+            label: 'RGB' + (hasAlpha.value === true ? 'A' : ''),
+            name: 'rgb',
+            ripple: false
+          })
+        ])
+      )
+
+      child.push(
+        h('div', {
+          class: 'q-color-picker__header-banner row flex-center no-wrap'
+        }, [
+          h('input', {
+            class: 'fit',
+            value: model.value[ topView.value ],
+            ...(editable.value !== true
+              ? { readonly: true }
+              : {}
+            ),
+            ...getCache('topIn', {
+              onInput: evt => {
+                updateErrorIcon(onEditorChange(evt) === true)
+              },
+              onChange: stop,
+              onBlur: evt => {
+                onEditorChange(evt, true) === true && proxy.$forceUpdate()
+                updateErrorIcon(false)
+              }
+            })
+          }),
+
+          h(QIcon, {
+            ref: errorIconRef,
+            class: 'q-color-picker__error-icon absolute no-pointer-events',
+            name: $q.iconSet.type.negative
+          })
+        ])
+      )
+
       return h('div', {
         class: 'q-color-picker__header relative-position overflow-hidden'
       }, [
@@ -504,57 +563,7 @@ export default defineComponent({
         h('div', {
           class: headerClass.value,
           style: currentBgColor.value
-        }, [
-          h(QTabs, {
-            modelValue: topView.value,
-            dense: true,
-            align: 'justify',
-            ...getCache('topVTab', {
-              'onUpdate:modelValue': val => { topView.value = val }
-            })
-          }, () => [
-            h(QTab, {
-              label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
-              name: 'hex',
-              ripple: false
-            }),
-
-            h(QTab, {
-              label: 'RGB' + (hasAlpha.value === true ? 'A' : ''),
-              name: 'rgb',
-              ripple: false
-            })
-          ]),
-
-          h('div', {
-            class: 'q-color-picker__header-banner row flex-center no-wrap'
-          }, [
-            h('input', {
-              class: 'fit',
-              value: model.value[ topView.value ],
-              ...(editable.value !== true
-                ? { readonly: true }
-                : {}
-              ),
-              ...getCache('topIn', {
-                onInput: evt => {
-                  updateErrorIcon(onEditorChange(evt) === true)
-                },
-                onChange: stop,
-                onBlur: evt => {
-                  onEditorChange(evt, true) === true && proxy.$forceUpdate()
-                  updateErrorIcon(false)
-                }
-              })
-            }),
-
-            h(QIcon, {
-              ref: errorIconRef,
-              class: 'q-color-picker__error-icon absolute no-pointer-events',
-              name: $q.iconSet.type.negative
-            })
-          ])
-        ])
+        }, child)
       ])
     }
 
@@ -790,19 +799,23 @@ export default defineComponent({
     }
 
     function getPaletteTab () {
+      const fn = color => h('div', {
+        class: 'q-color-picker__cube col-auto',
+        style: { backgroundColor: color },
+        ...(
+          editable.value === true
+            ? getCache('palette#' + color, {
+              onClick: () => { onPalettePick(color) }
+            })
+            : {}
+        )
+      })
+
       return [
         h('div', {
           class: 'row items-center q-color-picker__palette-rows'
             + (editable.value === true ? ' q-color-picker__palette-rows--editable' : '')
-        }, computedPalette.value.map(color => h('div', {
-          class: 'q-color-picker__cube col-auto',
-          style: { backgroundColor: color },
-          ...(editable.value === true ? getCache('palette#' + color, {
-            onClick: () => {
-              onPalettePick(color)
-            }
-          }) : {})
-        })))
+        }, computedPalette.value.map(fn))
       ]
     }
 

package/src/components/color/QColor.json

@@ -64,6 +64,13 @@
       "category": "content"
     },
 
+    "no-header-tabs": {
+      "type": "Boolean",
+      "desc": "Do not render header tabs (only the input)",
+      "category": "content",
+      "addedIn": "v2.2"
+    },
+
     "no-footer": {
       "type": "Boolean",
       "desc": "Do not render footer; Useful when you want a specific view ('default-view' prop) and don't want the user to be able to switch it",

package/src/components/color/QColor.sass

@@ -16,7 +16,11 @@
     border: 1px solid $separator-color
 
   &__header
-    height: 68px
+
+    &-tabs
+      height: 32px
+    &-banner
+      height: 36px
 
     input
       line-height: 24px

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/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,
@@ -135,6 +136,10 @@ export default defineComponent({
         : transitionShow.value
     ))
 
+    const transitionStyle = computed(
+      () => `--q-transition-duration: ${ props.transitionDuration }ms`
+    )
+
     const useBackdrop = computed(() => showing.value === true && props.seamless !== true)
 
     const onEvents = computed(() => (
@@ -375,6 +380,7 @@ export default defineComponent({
           useBackdrop.value === true
             ? h('div', {
                 class: 'q-dialog__backdrop fixed-full',
+                style: transitionStyle.value,
                 'aria-hidden': 'true',
                 onMousedown: onBackdropClick
               })
@@ -389,6 +395,7 @@ export default defineComponent({
               ? h('div', {
                   ref: innerRef,
                   class: classes.value,
+                  style: transitionStyle.value,
                   tabindex: -1,
                   ...onEvents.value
                 }, hSlot(slots.default))

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,
@@ -460,6 +461,9 @@ export default defineComponent({
       flagMiniAnimate.value = true
       timerMini = setTimeout(() => {
         flagMiniAnimate.value = false
+        if (vm && vm.proxy && vm.proxy.$el) {
+          vm.proxy.$el.classList.remove('q-drawer--mini-animate')
+        }
       }, 150)
     }
 

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/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/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/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,13 @@
-import { h, defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, 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({
+export default createComponent({
   name: 'QInfiniteScroll',
 
   props: {