quasar 2.18.6 → 2.19.0

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

@@ -15,11 +15,11 @@ import { hSlot } from '../../utils/private.render/render.js'
 
 const btnPropsList = Object.keys(nonRoundBtnProps)
 
-export function passBtnProps (props) {
+export function passBtnProps(props) {
   return btnPropsList.reduce((acc, key) => {
-    const val = props[ key ]
+    const val = props[key]
     if (val !== void 0) {
-      acc[ key ] = val
+      acc[key] = val
     }
     return acc
   }, {})
@@ -36,8 +36,8 @@ export default createComponent({
     split: Boolean,
     dropdownIcon: String,
 
-    contentClass: [ Array, String, Object ],
-    contentStyle: [ Array, String, Object ],
+    contentClass: [Array, String, Object],
+    contentStyle: [Array, String, Object],
 
     cover: Boolean,
     persistent: Boolean,
@@ -65,9 +65,16 @@ export default createComponent({
     toggleAriaLabel: String
   },
 
-  emits: [ 'update:modelValue', 'click', 'beforeShow', 'show', 'beforeHide', 'hide' ],
+  emits: [
+    'update:modelValue',
+    'click',
+    'beforeShow',
+    'show',
+    'beforeHide',
+    'hide'
+  ],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
 
     const showing = ref(props.modelValue)
@@ -79,86 +86,96 @@ export default createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid.value,
-        'aria-label': props.toggleAriaLabel || proxy.$q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
+        'aria-label':
+          props.toggleAriaLabel ||
+          proxy.$q.lang.label[showing.value === true ? 'collapse' : 'expand'](
+            props.label
+          )
       }
 
       if (
-        props.disable === true
-        || (
-          (props.split === false && props.disableMainBtn === true)
-          || props.disableDropdown === true
-        )
+        props.disable === true ||
+        (props.split === false && props.disableMainBtn === true) ||
+        props.disableDropdown === true
       ) {
-        acc[ 'aria-disabled' ] = 'true'
+        acc['aria-disabled'] = 'true'
       }
 
       return acc
     })
 
-    const iconClass = computed(() =>
-      'q-btn-dropdown__arrow'
-      + (showing.value === true && props.noIconAnimation === false ? ' rotate-180' : '')
-      + (props.split === false ? ' q-btn-dropdown__arrow-container' : '')
+    const iconClass = computed(
+      () =>
+        'q-btn-dropdown__arrow' +
+        (showing.value === true && props.noIconAnimation === false
+          ? ' rotate-180'
+          : '') +
+        (props.split === false ? ' q-btn-dropdown__arrow-container' : '')
     )
 
     const btnDesignAttr = computed(() => getBtnDesignAttr(props))
     const btnProps = computed(() => passBtnProps(props))
 
-    watch(() => props.modelValue, val => {
-      menuRef.value?.[ val ? 'show' : 'hide' ]()
-    })
+    watch(
+      () => props.modelValue,
+      val => {
+        menuRef.value?.[val ? 'show' : 'hide']()
+      }
+    )
 
     watch(() => props.split, hide)
 
-    function onBeforeShow (e) {
+    function onBeforeShow(e) {
       showing.value = true
       emit('beforeShow', e)
     }
 
-    function onShow (e) {
+    function onShow(e) {
       emit('show', e)
       emit('update:modelValue', true)
     }
 
-    function onBeforeHide (e) {
+    function onBeforeHide(e) {
       showing.value = false
       emit('beforeHide', e)
     }
 
-    function onHide (e) {
+    function onHide(e) {
       emit('hide', e)
       emit('update:modelValue', false)
     }
 
-    function onClick (e) {
+    function onClick(e) {
       emit('click', e)
     }
 
-    function onClickHide (e) {
+    function onClickHide(e) {
       stop(e)
       hide()
       emit('click', e)
     }
 
-    function toggle (evt) {
+    function toggle(evt) {
       menuRef.value?.toggle(evt)
     }
 
-    function show (evt) {
+    function show(evt) {
       menuRef.value?.show(evt)
     }
 
-    function hide (evt) {
+    function hide(evt) {
       menuRef.value?.hide(evt)
     }
 
     // expose public methods
     Object.assign(proxy, {
-      show, hide, toggle
+      show,
+      hide,
+      toggle
     })
 
     onMounted(() => {
-      props.modelValue === true && show()
+      if (props.modelValue === true) show()
     })
 
     return () => {
@@ -169,83 +186,105 @@ export default createComponent({
         })
       ]
 
-      props.disableDropdown !== true && Arrow.push(
-        h(QMenu, {
-          ref: menuRef,
-          id: targetUid.value,
-          class: props.contentClass,
-          style: props.contentStyle,
-          cover: props.cover,
-          fit: true,
-          persistent: props.persistent,
-          noEscDismiss: props.noEscDismiss,
-          noRouteDismiss: props.noRouteDismiss,
-          autoClose: props.autoClose,
-          noFocus: props.noFocus,
-          noRefocus: props.noRefocus,
-          anchor: props.menuAnchor,
-          self: props.menuSelf,
-          offset: props.menuOffset,
-          separateClosePopup: true,
-          transitionShow: props.transitionShow,
-          transitionHide: props.transitionHide,
-          transitionDuration: props.transitionDuration,
-          onBeforeShow,
-          onShow,
-          onBeforeHide,
-          onHide
-        }, slots.default)
-      )
+      if (props.disableDropdown !== true) {
+        Arrow.push(
+          h(
+            QMenu,
+            {
+              ref: menuRef,
+              id: targetUid.value,
+              class: props.contentClass,
+              style: props.contentStyle,
+              cover: props.cover,
+              fit: true,
+              persistent: props.persistent,
+              noEscDismiss: props.noEscDismiss,
+              noRouteDismiss: props.noRouteDismiss,
+              autoClose: props.autoClose,
+              noFocus: props.noFocus,
+              noRefocus: props.noRefocus,
+              anchor: props.menuAnchor,
+              self: props.menuSelf,
+              offset: props.menuOffset,
+              separateClosePopup: true,
+              transitionShow: props.transitionShow,
+              transitionHide: props.transitionHide,
+              transitionDuration: props.transitionDuration,
+              onBeforeShow,
+              onShow,
+              onBeforeHide,
+              onHide
+            },
+            slots.default
+          )
+        )
+      }
 
       if (props.split === false) {
-        return h(QBtn, {
-          class: 'q-btn-dropdown q-btn-dropdown--simple',
-          ...btnProps.value,
-          ...ariaAttrs.value,
-          disable: props.disable === true || props.disableMainBtn === true,
-          noWrap: true,
-          round: false,
-          onClick
-        }, {
-          default: () => hSlot(slots.label, []).concat(Arrow),
-          loading: slots.loading
-        })
+        return h(
+          QBtn,
+          {
+            class: 'q-btn-dropdown q-btn-dropdown--simple',
+            ...btnProps.value,
+            ...ariaAttrs.value,
+            disable: props.disable === true || props.disableMainBtn === true,
+            noWrap: true,
+            round: false,
+            onClick
+          },
+          {
+            default: () => hSlot(slots.label, []).concat(Arrow),
+            loading: slots.loading
+          }
+        )
       }
 
-      return h(QBtnGroup, {
-        class: 'q-btn-dropdown q-btn-dropdown--split no-wrap q-btn-item',
-        rounded: props.rounded,
-        square: props.square,
-        ...btnDesignAttr.value,
-        glossy: props.glossy,
-        stretch: props.stretch
-      }, () => [
-        h(QBtn, {
-          class: 'q-btn-dropdown--current',
-          ...btnProps.value,
-          disable: props.disable === true || props.disableMainBtn === true,
-          noWrap: true,
-          round: false,
-          onClick: onClickHide
-        }, {
-          default: slots.label,
-          loading: slots.loading
-        }),
-
-        h(QBtn, {
-          class: 'q-btn-dropdown__arrow-container q-anchor--skip',
-          ...ariaAttrs.value,
-          ...btnDesignAttr.value,
-          disable: props.disable === true || props.disableDropdown === true,
+      return h(
+        QBtnGroup,
+        {
+          class: 'q-btn-dropdown q-btn-dropdown--split no-wrap q-btn-item',
           rounded: props.rounded,
-          color: props.color,
-          textColor: props.textColor,
-          dense: props.dense,
-          size: props.size,
-          padding: props.padding,
-          ripple: props.ripple
-        }, () => Arrow)
-      ])
+          square: props.square,
+          ...btnDesignAttr.value,
+          glossy: props.glossy,
+          stretch: props.stretch
+        },
+        () => [
+          h(
+            QBtn,
+            {
+              class: 'q-btn-dropdown--current',
+              ...btnProps.value,
+              disable: props.disable === true || props.disableMainBtn === true,
+              noWrap: true,
+              round: false,
+              onClick: onClickHide
+            },
+            {
+              default: slots.label,
+              loading: slots.loading
+            }
+          ),
+
+          h(
+            QBtn,
+            {
+              class: 'q-btn-dropdown__arrow-container q-anchor--skip',
+              ...ariaAttrs.value,
+              ...btnDesignAttr.value,
+              disable: props.disable === true || props.disableDropdown === true,
+              rounded: props.rounded,
+              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,9 @@
 {
-  "mixins": [ "components/btn/use-btn", "composables/private.use-model-toggle/use-model-toggle", "composables/private.use-transition/use-transition" ],
+  "mixins": [
+    "components/btn/use-btn",
+    "composables/private.use-model-toggle/use-model-toggle",
+    "composables/private.use-transition/use-transition"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/button-dropdown"
@@ -8,7 +12,7 @@
   "props": {
     "model-value": {
       "type": "Boolean",
-      "__delete": [ "default" ]
+      "__delete": ["default"]
     },
 
     "split": {
@@ -40,7 +44,7 @@
     },
 
     "content-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the menu",
       "examples": [
@@ -51,19 +55,16 @@
     },
 
     "content-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the menu",
-      "examples": [
-        "'my-special-class'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'my-special-class'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "cover": {
       "type": "Boolean",
-      "desc": "Allows the menu to cover the button. When used, the 'menu-self' and 'menu-fit' props are no longer effective",
+      "desc": "Allows the menu to cover the button. When used, the 'menu-self' prop is no longer effective",
       "category": "position"
     },
 
@@ -110,9 +111,21 @@
       "type": "String",
       "desc": "Two values setting the starting position or anchor point of the menu relative to its target",
       "values": [
-        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
-        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
-        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
+        "'top left'",
+        "'top middle'",
+        "'top right'",
+        "'top start'",
+        "'top end'",
+        "'center left'",
+        "'center middle'",
+        "'center right'",
+        "'center start'",
+        "'center end'",
+        "'bottom left'",
+        "'bottom middle'",
+        "'bottom right'",
+        "'bottom start'",
+        "'bottom end'"
       ],
       "default": "'bottom end'",
       "category": "position"
@@ -122,9 +135,21 @@
       "type": "String",
       "desc": "Two values setting the menu's own position relative to its target",
       "values": [
-        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
-        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
-        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
+        "'top left'",
+        "'top middle'",
+        "'top right'",
+        "'top start'",
+        "'top end'",
+        "'center left'",
+        "'center middle'",
+        "'center right'",
+        "'center start'",
+        "'center end'",
+        "'bottom left'",
+        "'bottom middle'",
+        "'bottom right'",
+        "'bottom start'",
+        "'bottom end'"
       ],
       "default": "'top end'",
       "category": "position"
@@ -133,14 +158,14 @@
     "menu-offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the menu horizontally and vertically in pixels",
-      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
+      "examples": ["[8, 8]", "[5, 10]"],
       "category": "position"
     },
 
     "toggle-aria-label": {
       "type": "String",
       "desc": "aria-label to be used on the dropdown toggle element",
-      "examples": [ "'Open menu'" ],
+      "examples": ["'Open menu'"],
       "category": "accessibility",
       "addedIn": "v2.8.4"
     }

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

@@ -1,5 +1,3 @@
 import QBtnDropdown from './QBtnDropdown.js'
 
-export {
-  QBtnDropdown
-}
+export { QBtnDropdown }

package/src/components/btn-group/QBtnGroup.js

@@ -18,14 +18,26 @@ export default createComponent({
     spread: Boolean
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const classes = computed(() => {
-      const cls = [ 'unelevated', 'outline', 'flat', 'rounded', 'square', 'push', 'stretch', 'glossy' ]
-        .filter(t => props[ t ] === true)
-        .map(t => `q-btn-group--${ t }`).join(' ')
+      const cls = [
+        'unelevated',
+        'outline',
+        'flat',
+        'rounded',
+        'square',
+        'push',
+        'stretch',
+        'glossy'
+      ]
+        .filter(t => props[t] === true)
+        .map(t => `q-btn-group--${t}`)
+        .join(' ')
 
-      return `q-btn-group row no-wrap${ cls.length !== 0 ? ' ' + cls : '' }`
-        + (props.spread === true ? ' q-btn-group--spread' : ' inline')
+      return (
+        `q-btn-group row no-wrap${cls.length !== 0 ? ' ' + cls : ''}` +
+        (props.spread === true ? ' q-btn-group--spread' : ' inline')
+      )
     })
 
     return () => h('div', { class: classes.value }, hSlot(slots.default))

package/src/components/btn-group/index.js

@@ -1,5 +1,3 @@
 import QBtnGroup from './QBtnGroup.js'
 
-export {
-  QBtnGroup
-}
+export { QBtnGroup }