quasar 2.9.2 → 2.10.1

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

@@ -5,18 +5,33 @@ 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)
+
+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,
+    ...useTransitionProps,
 
     modelValue: Boolean,
     split: Boolean,
@@ -48,7 +63,7 @@ export default createComponent({
     toggleAriaLabel: String
   },
 
-  emits: [ 'update:modelValue', 'click', 'before-show', 'show', 'before-hide', 'hide' ],
+  emits: [ 'update:modelValue', 'click', 'beforeShow', 'show', 'beforeHide', 'hide' ],
 
   setup (props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
@@ -57,7 +72,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 +100,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' ]()
     })
@@ -93,7 +111,7 @@ export default createComponent({
 
     function onBeforeShow (e) {
       showing.value = true
-      emit('before-show', e)
+      emit('beforeShow', e)
     }
 
     function onShow (e) {
@@ -103,7 +121,7 @@ export default createComponent({
 
     function onBeforeHide (e) {
       showing.value = false
-      emit('before-hide', e)
+      emit('beforeHide', e)
     }
 
     function onHide (e) {
@@ -165,6 +183,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 +196,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 +210,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 +230,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"
@@ -97,7 +97,6 @@
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
       "default": "bottom end",
-      "examples": [ "top right", "bottom end" ],
       "category": "position"
     },
 
@@ -110,7 +109,6 @@
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
       "default": "top end",
-      "examples": [ "top right", "bottom end" ],
       "category": "position"
     },
 

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/btn-toggle/QBtnToggle.json

@@ -36,8 +36,7 @@
         "value": {
           "type": "Any",
           "desc": "Value of the option that will be used by component model",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         },
         "slot": {
           "type": "String",
@@ -46,8 +45,7 @@
         },
         "...props": {
           "type": "Any",
-          "desc": "Any other QBtn props (including class and style)",
-          "__exemption": [ "examples" ]
+          "desc": "Any other QBtn props (including class and style)"
         }
       },
       "examples": [

package/src/components/carousel/QCarousel.json

@@ -75,7 +75,6 @@
       "desc": "Side to stick navigation to",
       "default": "bottom/right",
       "values": [ "top", "right", "bottom", "left" ],
-      "examples": [ "left" ],
       "category": "content"
     },
 
@@ -117,18 +116,15 @@
       "scope": {
         "index": {
           "type": "Number",
-          "desc": "The 0-based index of corresponding slide",
-          "__exemption": [ "examples" ]
+          "desc": "The 0-based index of corresponding slide"
         },
         "maxIndex": {
           "type": "Number",
-          "desc": "The available number of slides",
-          "__exemption": [ "examples" ]
+          "desc": "The available number of slides"
         },
         "name": {
           "type": "Any",
-          "desc": "The name of the corresponding slide",
-          "__exemption": [ "examples" ]
+          "desc": "The name of the corresponding slide"
         },
         "active": {
           "type": "Boolean",
@@ -136,8 +132,7 @@
         },
         "btnProps": {
           "type": "Object",
-          "desc": "Default QBtn props that can be binded to your own QBtn",
-          "__exemption": [ "examples" ]
+          "desc": "Default QBtn props that can be binded to your own QBtn"
         },
         "onClick": {
           "type": "Function",

package/src/components/carousel/QCarouselControl.json

@@ -13,7 +13,6 @@
         "bottom-right", "bottom-left",
         "top", "right", "bottom", "left"
       ],
-      "examples": [ "top-right" ],
       "category": "position"
     },
 

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/checkbox/use-checkbox.json

@@ -118,8 +118,7 @@
         "value": {
           "type": "Any",
           "desc": "New model value",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         },
         "evt": {
           "extends": "evt",

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/circular-progress/QCircularProgress.json

@@ -10,7 +10,6 @@
       "type": "Number",
       "default": 0,
       "desc": "Current progress (must be between min/max)",
-      "examples": [ 0, 100, 52.32 ],
       "category": "model"
     },
 
@@ -18,7 +17,6 @@
       "type": "Number",
       "default": 0,
       "desc": "Minimum value defining 'no progress' (must be lower than 'max')",
-      "examples": [ 0, 100, 52.32 ],
       "category": "model"
     },
 
@@ -26,7 +24,6 @@
       "type": "Number",
       "default": 100,
       "desc": "Maximum value defining 100% progress made (must be higher than 'min')",
-      "examples": [ 100, 52.32 ],
       "category": "model"
     },
 
@@ -64,7 +61,6 @@
       "type": "Number",
       "default": 0.2,
       "desc": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size",
-      "examples": [ 1, 0.3 ],
       "category": "style"
     },
 
@@ -72,7 +68,6 @@
       "type": "Number",
       "desc": "Angle to rotate progress arc by",
       "default": 0,
-      "examples": [ 0, 40, 90 ],
       "category": "content"
     },
 

package/src/components/color/QColor.json

@@ -32,7 +32,6 @@
       "desc": "Forces a certain model format upon the model",
       "default": "auto",
       "values": [ "auto", "hex", "rgb", "hexa", "rgba" ],
-      "examples": [ "hex" ],
       "category": "model"
     },
 

package/src/components/date/QDate.js

@@ -82,7 +82,7 @@ export default createComponent({
 
   emits: [
     ...useDatetimeEmits,
-    'range-start', 'range-end', 'navigation'
+    'rangeStart', 'rangeEnd', 'navigation'
   ],
 
   setup (props, { slots, emit }) {
@@ -1391,7 +1391,7 @@ export default createComponent({
           finalHash: initHash
         }
 
-        emit('range-start', getShortDate(day))
+        emit('rangeStart', getShortDate(day))
       }
       else {
         const
@@ -1404,7 +1404,7 @@ export default createComponent({
         editRange.value = null
         addToModel(initHash === finalHash ? day : { target: day, ...payload })
 
-        emit('range-end', {
+        emit('rangeEnd', {
           from: getShortDate(payload.from),
           to: getShortDate(payload.to)
         })

package/src/components/date/QDate.json

@@ -210,20 +210,17 @@
             "year": {
               "type": "Number",
               "required": true,
-              "desc": "The year of the date that the user has clicked/tapped on",
-              "__exemption": [ "examples" ]
+              "desc": "The year of the date that the user has clicked/tapped on"
             },
             "month": {
               "type": "Number",
               "required": true,
-              "desc": "The month of the date that the user has clicked/tapped on",
-              "__exemption": [ "examples" ]
+              "desc": "The month of the date that the user has clicked/tapped on"
             },
             "day": {
               "type": "Number",
               "required": true,
-              "desc": "The day of the month that the user has clicked/tapped on",
-              "__exemption": [ "examples" ]
+              "desc": "The day of the month that the user has clicked/tapped on"
             },
             "from": {
               "type": "Object",
@@ -233,20 +230,17 @@
                 "year": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The year",
-                  "__exemption": [ "examples" ]
+                  "desc": "The year"
                 },
                 "month": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The month"
                 },
                 "day": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The day of month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The day of month"
                 }
               }
             },
@@ -258,20 +252,17 @@
                 "year": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The year",
-                  "__exemption": [ "examples" ]
+                  "desc": "The year"
                 },
                 "month": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The month"
                 },
                 "day": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The day of month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The day of month"
                 }
               }
             }
@@ -290,14 +281,12 @@
             "year": {
               "type": "Number",
               "required": true,
-              "desc": "The year",
-              "__exemption": [ "examples" ]
+              "desc": "The year"
             },
             "month": {
               "type": "Number",
               "required": true,
-              "desc": "The month",
-              "__exemption": [ "examples" ]
+              "desc": "The month"
             }
           }
         }
@@ -314,20 +303,17 @@
             "year": {
               "type": "Number",
               "required": true,
-              "desc": "The year",
-              "__exemption": [ "examples" ]
+              "desc": "The year"
             },
             "month": {
               "type": "Number",
               "required": true,
-              "desc": "The month",
-              "__exemption": [ "examples" ]
+              "desc": "The month"
             },
             "day": {
               "type": "Number",
               "required": true,
-              "desc": "The day of month",
-              "__exemption": [ "examples" ]
+              "desc": "The day of month"
             }
           }
         }
@@ -349,20 +335,17 @@
                 "year": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The year",
-                  "__exemption": [ "examples" ]
+                  "desc": "The year"
                 },
                 "month": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The month"
                 },
                 "day": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The day of month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The day of month"
                 }
               }
             },
@@ -374,20 +357,17 @@
                 "year": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The year",
-                  "__exemption": [ "examples" ]
+                  "desc": "The year"
                 },
                 "month": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The month"
                 },
                 "day": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The day of month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The day of month"
                 }
               }
             }
@@ -435,13 +415,11 @@
       "params": {
         "year": {
           "type": "Number",
-          "desc": "The year",
-          "__exemption": [ "examples" ]
+          "desc": "The year"
         },
         "month": {
           "type": "Number",
-          "desc": "The month",
-          "__exemption": [ "examples" ]
+          "desc": "The month"
         }
       }
     },
@@ -455,18 +433,15 @@
           "definition": {
             "year": {
               "type": "Number",
-              "desc": "The year",
-              "__exemption": [ "examples" ]
+              "desc": "The year"
             },
             "month": {
               "type": "Number",
-              "desc": "The month",
-              "__exemption": [ "examples" ]
+              "desc": "The month"
             },
             "day": {
               "type": "Number",
-              "desc": "The day of month",
-              "__exemption": [ "examples" ]
+              "desc": "The day of month"
             }
           }
         },
@@ -476,18 +451,15 @@
           "definition": {
             "year": {
               "type": "Number",
-              "desc": "The year",
-              "__exemption": [ "examples" ]
+              "desc": "The year"
             },
             "month": {
               "type": "Number",
-              "desc": "The month",
-              "__exemption": [ "examples" ]
+              "desc": "The month"
             },
             "day": {
               "type": "Number",
-              "desc": "The day of month",
-              "__exemption": [ "examples" ]
+              "desc": "The day of month"
             }
           }
         }