quasar 2.9.2 → 2.10.0

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -5,18 +5,40 @@ import QBtn from '../btn/QBtn.js'
 import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
-import { useBtnProps } from '../btn/use-btn.js'
+import { getBtnDesignAttr, useBtnProps } from '../btn/use-btn.js'
+import { useTransitionProps } from '../../composables/private/use-transition.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stop } from '../../utils/event.js'
 import uid from '../../utils/uid.js'
 import { hSlot } from '../../utils/private/render.js'
 
+const btnPropsList = Object.keys(useBtnProps)
+
+// let's not duplicate type checking and prop validations
+// so just specify the props here with no type description
+const btnProps = btnPropsList.reduce(
+  (acc, key) => (acc[ key ] = {}) && acc,
+  {}
+)
+
+export const passBtnProps = props => btnPropsList.reduce(
+  (acc, key) => {
+    const val = props[ key ]
+    if (val !== void 0) {
+      acc[ key ] = val
+    }
+    return acc
+  },
+  {}
+)
+
 export default createComponent({
   name: 'QBtnDropdown',
 
   props: {
-    ...useBtnProps,
+    ...btnProps,
+    ...useTransitionProps,
 
     modelValue: Boolean,
     split: Boolean,
@@ -57,7 +79,7 @@ export default createComponent({
     const menuRef = ref(null)
     const targetUid = uid()
 
-    const attributes = computed(() => {
+    const ariaAttrs = computed(() => {
       const acc = {
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
@@ -85,6 +107,9 @@ export default createComponent({
       + (props.split === false ? ' q-btn-dropdown__arrow-container' : '')
     )
 
+    const btnDesignAttr = computed(() => getBtnDesignAttr(props))
+    const btnProps = computed(() => passBtnProps(props))
+
     watch(() => props.modelValue, val => {
       menuRef.value !== null && menuRef.value[ val ? 'show' : 'hide' ]()
     })
@@ -165,6 +190,9 @@ export default createComponent({
           self: props.menuSelf,
           offset: props.menuOffset,
           separateClosePopup: true,
+          transitionShow: props.transitionShow,
+          transitionHide: props.transitionHide,
+          transitionDuration: props.transitionDuration,
           onBeforeShow,
           onShow,
           onBeforeHide,
@@ -175,11 +203,11 @@ export default createComponent({
       if (props.split === false) {
         return h(QBtn, {
           class: 'q-btn-dropdown q-btn-dropdown--simple',
-          ...props,
+          ...btnProps.value,
+          ...ariaAttrs.value,
           disable: props.disable === true || props.disableMainBtn === true,
           noWrap: true,
           round: false,
-          ...attributes.value,
           onClick
         }, {
           default: () => hSlot(slots.label, []).concat(Arrow),
@@ -189,21 +217,17 @@ export default createComponent({
 
       return h(QBtnGroup, {
         class: 'q-btn-dropdown q-btn-dropdown--split no-wrap q-btn-item',
-        outline: props.outline,
-        flat: props.flat,
         rounded: props.rounded,
         square: props.square,
-        push: props.push,
-        unelevated: props.unelevated,
+        ...btnDesignAttr.value,
         glossy: props.glossy,
         stretch: props.stretch
       }, () => [
         h(QBtn, {
           class: 'q-btn-dropdown--current',
-          ...props,
+          ...btnProps.value,
           disable: props.disable === true || props.disableMainBtn === true,
           noWrap: true,
-          iconRight: props.iconRight,
           round: false,
           onClick: onClickHide
         }, {
@@ -213,16 +237,15 @@ export default createComponent({
 
         h(QBtn, {
           class: 'q-btn-dropdown__arrow-container q-anchor--skip',
-          ...attributes.value,
+          ...ariaAttrs.value,
+          ...btnDesignAttr.value,
           disable: props.disable === true || props.disableDropdown === true,
-          outline: props.outline,
-          flat: props.flat,
           rounded: props.rounded,
-          push: props.push,
-          size: props.size,
           color: props.color,
           textColor: props.textColor,
           dense: props.dense,
+          size: props.size,
+          padding: props.padding,
           ripple: props.ripple
         }, () => Arrow)
       ])

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/btn/use-btn", "composables/private/use-model-toggle" ],
+  "mixins": [ "components/btn/use-btn", "composables/private/use-model-toggle", "composables/private/use-transition" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/button-dropdown"

package/src/components/btn-toggle/QBtnToggle.js

@@ -7,6 +7,7 @@ import { createComponent } from '../../utils/private/create.js'
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
 import { hMergeSlot } from '../../utils/private/render.js'
+import { getBtnDesignAttr } from '../btn/use-btn.js'
 
 export default createComponent({
   name: 'QBtnToggle',
@@ -80,6 +81,14 @@ export default createComponent({
 
     const injectFormInput = useFormInject(formAttrs)
 
+    const btnDesignAttr = computed(() => getBtnDesignAttr(props))
+
+    const btnOptionDesign = computed(() => ({
+      rounded: props.rounded,
+      dense: props.dense,
+      ...btnDesignAttr.value
+    }))
+
     const btnOptions = computed(() => props.options.map((item, i) => {
       const { attrs, value, slot, ...opt } = item
 
@@ -87,19 +96,11 @@ export default createComponent({
         slot,
         props: {
           key: i,
-          onClick (e) { set(value, item, e) },
 
           'aria-pressed': value === props.modelValue ? 'true' : 'false',
-
           ...attrs,
           ...opt,
-
-          outline: props.outline,
-          flat: props.flat,
-          rounded: props.rounded,
-          push: props.push,
-          unelevated: props.unelevated,
-          dense: props.dense,
+          ...btnOptionDesign.value,
 
           disable: props.disable === true || opt.disable === true,
 
@@ -117,7 +118,9 @@ export default createComponent({
           padding: mergeOpt(opt, 'padding'),
           ripple: mergeOpt(opt, 'ripple'),
           stack: mergeOpt(opt, 'stack') === true,
-          stretch: mergeOpt(opt, 'stretch') === true
+          stretch: mergeOpt(opt, 'stretch') === true,
+
+          onClick (e) { set(value, item, e) }
         }
       }
     }))
@@ -156,12 +159,9 @@ export default createComponent({
 
     return () => h(QBtnGroup, {
       class: 'q-btn-toggle',
-      outline: props.outline,
-      flat: props.flat,
+      ...btnDesignAttr.value,
       rounded: props.rounded,
-      push: props.push,
       stretch: props.stretch,
-      unelevated: props.unelevated,
       glossy: props.glossy,
       spread: props.spread
     }, getContent)

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

@@ -127,7 +127,7 @@ export default function (type, getInner) {
   const attributes = computed(() => {
     const attrs = {
       tabindex: tabindex.value,
-      role: 'checkbox',
+      role: type === 'toggle' ? 'switch' : 'checkbox',
       'aria-label': props.label,
       'aria-checked': isIndeterminate.value === true
         ? 'mixed'

package/src/components/chip/QChip.js

@@ -102,16 +102,19 @@ export default createComponent({
         + (isDark.value === true ? ' q-chip--dark q-dark' : '')
     })
 
-    const attributes = computed(() => (
-      props.disable === true
+    const attributes = computed(() => {
+      const chip = props.disable === true
         ? { tabindex: -1, 'aria-disabled': 'true' }
-        : {
-            tabindex: props.tabindex || 0,
-            role: 'button',
-            'aria-hidden': 'false',
-            'aria-label': props.removeAriaLabel || $q.lang.label.remove
-          }
-    ))
+        : { tabindex: props.tabindex || 0 }
+      const remove = {
+        ...chip,
+        role: 'button',
+        'aria-hidden': 'false',
+        'aria-label': props.removeAriaLabel || $q.lang.label.remove
+      }
+
+      return { chip, remove }
+    })
 
     function onKeyup (e) {
       e.keyCode === 13 /* ENTER */ && onClick(e)
@@ -169,7 +172,7 @@ export default createComponent({
         h(QIcon, {
           class: 'q-chip__icon q-chip__icon--remove cursor-pointer',
           name: removeIcon.value,
-          ...attributes.value,
+          ...attributes.value.remove,
           onClick: onRemove,
           onKeyup: onRemove
         })
@@ -188,7 +191,7 @@ export default createComponent({
 
       isClickable.value === true && Object.assign(
         data,
-        attributes.value,
+        attributes.value.chip,
         { onClick, onKeyup }
       )
 

package/src/components/dialog/QDialog.js

@@ -376,7 +376,8 @@ export default createComponent({
 
     function renderPortalContent () {
       return h('div', {
-        'aria-modal': 'true',
+        role: 'dialog',
+        'aria-modal': useBackdrop.value === true ? 'true' : 'false',
         ...attrs,
         class: rootClasses.value
       }, [

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

@@ -70,6 +70,7 @@ export default createComponent({
               action.class
             ],
             tabindex: 0,
+            role: 'listitem',
             onClick () { onOk(action) },
             onKeyup (e) { e.keyCode === 13 && onOk(action) }
           }, [
@@ -145,9 +146,12 @@ export default createComponent({
       child.push(
         props.grid === true
           ? h('div', {
-            class: 'row items-stretch justify-start'
+            class: 'row items-stretch justify-start',
+            role: 'list'
           }, getGrid())
-          : h('div', getList())
+          : h('div', {
+            role: 'list'
+          }, getList())
       )
 
       return child

package/src/components/drawer/QDrawer.js

@@ -11,7 +11,7 @@ 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'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 const duration = 150
 
@@ -77,9 +77,11 @@ export default createComponent({
     const { preventBodyScroll } = usePreventScroll()
     const { registerTimeout, removeTimeout } = useTimeout()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QDrawer needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     let lastDesktopState, timerMini, layoutTotalWidthWatcher
 

package/src/components/footer/QFooter.js

@@ -6,7 +6,7 @@ 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'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QFooter',
@@ -31,9 +31,11 @@ export default createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QFooter needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     const size = ref(parseInt(props.heightHint, 10))
     const revealed = ref(true)

package/src/components/header/QHeader.js

@@ -4,7 +4,7 @@ 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'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QHeader',
@@ -33,9 +33,11 @@ export default createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QHeader needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     const size = ref(parseInt(props.heightHint, 10))
     const revealed = ref(true)

package/src/components/input/use-mask.js

@@ -166,7 +166,7 @@ export default function (props, emit, emitValue, inputRef) {
         '^'
         + unmask.join('')
         + '(' + (unmaskChar === '' ? '.' : '[^' + unmaskChar + ']') + '+)?'
-        + '[' + unmaskChar + ']*$'
+        + (unmaskChar === '' ? '' : '[' + unmaskChar + ']*') + '$'
       ),
       extractLast = extract.length - 1,
       extractMatcher = extract.map((re, index) => {

package/src/components/item/QItem.js

@@ -136,6 +136,7 @@ export default createComponent({
         ref: rootRef,
         class: classes.value,
         style: style.value,
+        role: 'listitem',
         onClick,
         onKeyup
       }

package/src/components/item/QList.js

@@ -29,6 +29,6 @@ export default createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h('div', { class: classes.value, role: 'list' }, hSlot(slots.default))
   }
 })

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

@@ -74,7 +74,7 @@ export default createComponent({
     )
 
     const attrs = computed(() => {
-      const attrs = {}
+      const attrs = { role: 'group' }
 
       if (props.type === 'radio') {
         attrs.role = 'radiogroup'

package/src/components/page/QPage.js

@@ -2,7 +2,7 @@ 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'
+import { pageContainerKey, layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QPage',
@@ -15,10 +15,17 @@ export default createComponent({
   setup (props, { slots }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey)
-    inject(pageContainerKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
+      console.error('QPage needs to be a deep child of QLayout')
+      return emptyRenderFn
+    }
+
+    const $pageContainer = inject(pageContainerKey, emptyRenderFn)
+    if ($pageContainer === emptyRenderFn) {
       console.error('QPage needs to be child of QPageContainer')
-    })
+      return emptyRenderFn
+    }
 
     const style = computed(() => {
       const offset

package/src/components/page/QPageContainer.js

@@ -2,7 +2,7 @@ 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'
+import { pageContainerKey, layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QPageContainer',
@@ -10,9 +10,11 @@ export default createComponent({
   setup (_, { slots }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QPageContainer needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     provide(pageContainerKey, true)
 

package/src/components/page-sticky/use-page-sticky.js

@@ -1,7 +1,7 @@
 import { h, computed, inject, getCurrentInstance } from 'vue'
 
 import { hSlot } from '../../utils/private/render.js'
-import { layoutKey } from '../../utils/private/symbols.js'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export const usePageStickyProps = {
   position: {
@@ -23,9 +23,11 @@ export const usePageStickyProps = {
 export default function () {
   const { props, proxy: { $q } } = getCurrentInstance()
 
-  const $layout = inject(layoutKey, () => {
+  const $layout = inject(layoutKey, emptyRenderFn)
+  if ($layout === emptyRenderFn) {
     console.error('QPageSticky needs to be child of QLayout')
-  })
+    return emptyRenderFn
+  }
 
   const attach = computed(() => {
     const pos = props.position