quasar 2.2.1 → 2.3.0

package/src/components/layout/QLayout.js

@@ -1,15 +1,16 @@
-import { h, defineComponent, ref, reactive, computed, provide, getCurrentInstance } from 'vue'
+import { h, ref, reactive, computed, provide, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
 import QScrollObserver from '../scroll-observer/QScrollObserver.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { getScrollbarWidth } from '../../utils/scroll.js'
 import { hMergeSlot } from '../../utils/private/render.js'
 import { layoutKey } from '../../utils/private/symbols.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QLayout',
 
   props: {

package/src/components/linear-progress/QLinearProgress.js

@@ -1,8 +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 useSize, { useSizeProps } from '../../composables/private/use-size.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlot } from '../../utils/private/render.js'
 
 const defaultSizes = {
@@ -21,7 +22,7 @@ function width (val, reverse, $q) {
   }
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QLinearProgress',
 
   props: {
@@ -43,6 +44,11 @@ export default defineComponent({
     query: Boolean,
     rounded: Boolean,
 
+    animationSpeed: {
+      type: [ String, Number ],
+      default: 2100
+    },
+
     instantFeedback: Boolean
   },
 
@@ -52,6 +58,10 @@ export default defineComponent({
     const sizeStyle = useSize(props, defaultSizes)
 
     const motion = computed(() => props.indeterminate === true || props.query === true)
+    const style = computed(() => ({
+      ...(sizeStyle.value !== null ? sizeStyle.value : {}),
+      '--q-linear-progress-speed': `${ props.animationSpeed }ms`
+    }))
 
     const classes = computed(() =>
       'q-linear-progress'
@@ -102,7 +112,7 @@ export default defineComponent({
 
       return h('div', {
         class: classes.value,
-        style: sizeStyle.value,
+        style: style.value,
         role: 'progressbar',
         'aria-valuemin': 0,
         'aria-valuemax': 1,

package/src/components/linear-progress/QLinearProgress.json

@@ -66,6 +66,12 @@
       "type": "Boolean",
       "desc": "No transition when model changes",
       "category": "behavior"
+    },
+
+    "animation-speed": {
+      "extends": "animation-speed",
+      "default": 300,
+      "addedIn": "v2.2.5"
     }
   },
 

package/src/components/linear-progress/QLinearProgress.sass

@@ -1,4 +1,5 @@
 .q-linear-progress
+  --q-linear-progress-speed: .3s
   position: relative
   width: 100%
   overflow: hidden
@@ -10,7 +11,7 @@
     transform-origin: 0 0
 
     &--with-transition
-      transition: transform .3s
+      transition: transform var(--q-linear-progress-speed)
 
   &--reverse
     .q-linear-progress

package/src/components/markup-table/QMarkupTable.js

@@ -1,12 +1,13 @@
-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'
 
 const separatorValues = [ 'horizontal', 'vertical', 'cell', 'none' ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QMarkupTable',
 
   props: {

package/src/components/menu/QMenu.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, Transition, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, Transition, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
 import useScrollTarget from '../../composables/private/use-scroll-target.js'
@@ -9,6 +9,7 @@ import useTransition, { useTransitionProps } from '../../composables/private/use
 import useTick from '../../composables/private/use-tick.js'
 import useTimeout from '../../composables/private/use-timeout.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { closePortalMenus } from '../../utils/private/portal.js'
 import { getScrollTarget } from '../../utils/scroll.js'
 import { position, stopAndPrevent } from '../../utils/event.js'
@@ -17,13 +18,13 @@ import { addEscapeKey, removeEscapeKey } from '../../utils/private/escape-key.js
 import { addFocusout, removeFocusout } from '../../utils/private/focusout.js'
 import { childHasFocus } from '../../utils/dom.js'
 import { addClickOutside, removeClickOutside } from '../../utils/private/click-outside.js'
+import { addFocusFn } from '../../utils/private/focus-manager.js'
 
 import {
   validatePosition, validateOffset, setPosition, parsePosition
 } from '../../utils/private/position-engine.js'
-import { addFocusFn } from '../../utils/private/focus-manager.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QMenu',
 
   inheritAttrs: false,

package/src/components/no-ssr/QNoSsr.js

@@ -1,10 +1,11 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
 import useCanRender from '../../composables/private/use-can-render.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QNoSsr',
 
   props: {

package/src/components/option-group/QOptionGroup.js

@@ -1,9 +1,11 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
 import QRadio from '../radio/QRadio.js'
 import QCheckbox from '../checkbox/QCheckbox.js'
 import QToggle from '../toggle/QToggle.js'
 
+import { createComponent } from '../../utils/private/create.js'
+
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 const components = {
@@ -14,7 +16,7 @@ const components = {
 
 const typeValues = Object.keys(components)
 
-export default defineComponent({
+export default createComponent({
   name: 'QOptionGroup',
 
   props: {

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,13 @@
-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 { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+import { createComponent } from '../../utils/private/create.js'
+
+export default createComponent({
   name: 'QPopupProxy',
 
   props: {
@@ -38,6 +39,10 @@ export default defineComponent({
 
     const type = ref(getType())
 
+    const popupProps = computed(() => (
+      type.value === 'menu' ? { maxHeight: '99vh' } : {})
+    )
+
     watch(() => getType(), val => {
       if (showing.value !== true) {
         type.value = val
@@ -63,21 +68,9 @@ export default defineComponent({
     }
 
     return () => {
-      const def = hSlot(slots.default)
-
-      const popupProps = (
-        type.value === 'menu'
-        && def !== void 0
-        && def[ 0 ] !== void 0
-        && def[ 0 ].type !== void 0
-        && [ 'QDate', 'QTime', 'QCarousel', 'QColor' ].includes(
-          def[ 0 ].type.name
-        )
-      ) ? { cover: true, maxHeight: '99vh' } : {}
-
       const data = {
         ref: popupRef,
-        ...popupProps,
+        ...popupProps.value,
         ...attrs,
         onShow,
         onHide
@@ -98,7 +91,7 @@ export default defineComponent({
         })
       }
 
-      return h(component, data, () => def)
+      return h(component, data, slots.default)
     }
   }
 })

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

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