quasar 2.18.7 → 2.19.0

package/src/components/btn/index.js

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

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

@@ -1,8 +1,14 @@
 import { computed } from 'vue'
 
-import useAlign, { useAlignProps } from '../../composables/private.use-align/use-align.js'
-import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
-import useRouterLink, { useRouterLinkNonMatchingProps } from '../../composables/private.use-router-link/use-router-link.js'
+import useAlign, {
+  useAlignProps
+} from '../../composables/private.use-align/use-align.js'
+import useSize, {
+  useSizeProps
+} from '../../composables/private.use-size/use-size.js'
+import useRouterLink, {
+  useRouterLinkNonMatchingProps
+} from '../../composables/private.use-router-link/use-router-link.js'
 
 export const btnPadding = {
   none: 0,
@@ -21,12 +27,12 @@ export const defaultSizes = {
   xl: 24
 }
 
-const formTypes = [ 'button', 'submit', 'reset' ]
+const formTypes = ['button', 'submit', 'reset']
 const mediaTypeRE = /[^\s]\/[^\s]/
 
-export const btnDesignOptions = [ 'flat', 'outline', 'push', 'unelevated' ]
+export const btnDesignOptions = ['flat', 'outline', 'push', 'unelevated']
 
-export function getBtnDesign (props, defaultValue) {
+export function getBtnDesign(props, defaultValue) {
   if (props.flat === true) return 'flat'
   if (props.outline === true) return 'outline'
   if (props.push === true) return 'push'
@@ -34,11 +40,9 @@ export function getBtnDesign (props, defaultValue) {
   return defaultValue
 }
 
-export function getBtnDesignAttr (props) {
+export function getBtnDesignAttr(props) {
   const design = getBtnDesign(props)
-  return design !== void 0
-    ? { [ design ]: true }
-    : {}
+  return design !== void 0 ? { [design]: true } : {}
 }
 
 export const nonRoundBtnProps = {
@@ -50,14 +54,11 @@ export const nonRoundBtnProps = {
     default: 'button'
   },
 
-  label: [ Number, String ],
+  label: [Number, String],
   icon: String,
   iconRight: String,
 
-  ...btnDesignOptions.reduce(
-    (acc, val) => (acc[ val ] = Boolean) && acc,
-    {}
-  ),
+  ...btnDesignOptions.reduce((acc, val) => (acc[val] = Boolean) && acc, {}),
 
   square: Boolean,
   rounded: Boolean,
@@ -74,10 +75,10 @@ export const nonRoundBtnProps = {
   noWrap: Boolean,
   dense: Boolean,
 
-  tabindex: [ Number, String ],
+  tabindex: [Number, String],
 
   ripple: {
-    type: [ Boolean, Object ],
+    type: [Boolean, Object],
     default: true
   },
 
@@ -99,41 +100,41 @@ export const useBtnProps = {
   round: Boolean
 }
 
-export default function (props) {
+export default function useBtn(props) {
   const sizeStyle = useSize(props, defaultSizes)
   const alignClass = useAlign(props)
-  const { hasRouterLink, hasLink, linkTag, linkAttrs, navigateOnClick } = useRouterLink({
-    fallbackTag: 'button'
-  })
+  const { hasRouterLink, hasLink, linkTag, linkAttrs, navigateOnClick } =
+    useRouterLink({
+      fallbackTag: 'button'
+    })
 
   const style = computed(() => {
-    const obj = props.fab === false && props.fabMini === false
-      ? sizeStyle.value
-      : {}
+    const obj =
+      props.fab === false && props.fabMini === false ? sizeStyle.value : {}
 
     return props.padding !== void 0
       ? Object.assign({}, obj, {
-        padding: props.padding
-          .split(/\s+/)
-          .map(v => (v in btnPadding ? btnPadding[ v ] + 'px' : v))
-          .join(' '),
-        minWidth: '0',
-        minHeight: '0'
-      })
+          padding: props.padding
+            .split(/\s+/)
+            .map(v => (v in btnPadding ? btnPadding[v] + 'px' : v))
+            .join(' '),
+          minWidth: '0',
+          minHeight: '0'
+        })
       : obj
   })
 
-  const isRounded = computed(() =>
-    props.rounded === true || props.fab === true || props.fabMini === true
+  const isRounded = computed(
+    () => props.rounded === true || props.fab === true || props.fabMini === true
   )
 
-  const isActionable = computed(() =>
-    props.disable !== true && props.loading !== true
+  const isActionable = computed(
+    () => props.disable !== true && props.loading !== true
   )
 
-  const tabIndex = computed(() => (
+  const tabIndex = computed(() =>
     isActionable.value === true ? props.tabindex || 0 : -1
-  ))
+  )
 
   const design = computed(() => getBtnDesign(props, 'standard'))
 
@@ -142,26 +143,26 @@ export default function (props) {
 
     if (hasLink.value === true) {
       Object.assign(acc, linkAttrs.value)
-    }
-    else if (formTypes.includes(props.type) === true) {
+    } else if (formTypes.includes(props.type) === true) {
       acc.type = props.type
     }
 
     if (linkTag.value === 'a') {
       if (props.disable === true) {
-        acc[ 'aria-disabled' ] = 'true'
-      }
-      else if (acc.href === void 0) {
+        acc['aria-disabled'] = 'true'
+      } else if (acc.href === void 0) {
         acc.role = 'button'
       }
 
-      if (hasRouterLink.value !== true && mediaTypeRE.test(props.type) === true) {
+      if (
+        hasRouterLink.value !== true &&
+        mediaTypeRE.test(props.type) === true
+      ) {
         acc.type = props.type
       }
-    }
-    else if (props.disable === true) {
+    } else if (props.disable === true) {
       acc.disabled = ''
-      acc[ 'aria-disabled' ] = 'true'
+      acc['aria-disabled'] = 'true'
     }
 
     if (props.loading === true && props.percentage !== void 0) {
@@ -181,35 +182,46 @@ export default function (props) {
 
     if (props.color !== void 0) {
       if (props.flat === true || props.outline === true) {
-        colors = `text-${ props.textColor || props.color }`
+        colors = `text-${props.textColor || props.color}`
+      } else {
+        colors = `bg-${props.color} text-${props.textColor || 'white'}`
       }
-      else {
-        colors = `bg-${ props.color } text-${ props.textColor || 'white' }`
-      }
-    }
-    else if (props.textColor) {
-      colors = `text-${ props.textColor }`
+    } else if (props.textColor) {
+      colors = `text-${props.textColor}`
     }
 
-    const shape = props.round === true
-      ? 'round'
-      : `rectangle${ isRounded.value === true ? ' q-btn--rounded' : (props.square === true ? ' q-btn--square' : '') }`
-
-    return `q-btn--${ design.value } q-btn--${ shape }`
-      + (colors !== void 0 ? ' ' + colors : '')
-      + (isActionable.value === true ? ' q-btn--actionable q-focusable q-hoverable' : (props.disable === true ? ' disabled' : ''))
-      + (props.fab === true ? ' q-btn--fab' : (props.fabMini === true ? ' q-btn--fab-mini' : ''))
-      + (props.noCaps === true ? ' q-btn--no-uppercase' : '')
-      + (props.dense === true ? ' q-btn--dense' : '')
-      + (props.stretch === true ? ' no-border-radius self-stretch' : '')
-      + (props.glossy === true ? ' glossy' : '')
-      + (props.square ? ' q-btn--square' : '')
+    const shape =
+      props.round === true
+        ? 'round'
+        : `rectangle${isRounded.value === true ? ' q-btn--rounded' : props.square === true ? ' q-btn--square' : ''}`
+
+    return (
+      `q-btn--${design.value} q-btn--${shape}` +
+      (colors !== void 0 ? ' ' + colors : '') +
+      (isActionable.value === true
+        ? ' q-btn--actionable q-focusable q-hoverable'
+        : props.disable === true
+          ? ' disabled'
+          : '') +
+      (props.fab === true
+        ? ' q-btn--fab'
+        : props.fabMini === true
+          ? ' q-btn--fab-mini'
+          : '') +
+      (props.noCaps === true ? ' q-btn--no-uppercase' : '') +
+      (props.dense === true ? ' q-btn--dense' : '') +
+      (props.stretch === true ? ' no-border-radius self-stretch' : '') +
+      (props.glossy === true ? ' glossy' : '') +
+      (props.square ? ' q-btn--square' : '')
+    )
   })
 
-  const innerClasses = computed(() =>
-    alignClass.value + (props.stack === true ? ' column' : ' row')
-    + (props.noWrap === true ? ' no-wrap text-no-wrap' : '')
-    + (props.loading === true ? ' q-btn__content--hidden' : '')
+  const innerClasses = computed(
+    () =>
+      alignClass.value +
+      (props.stack === true ? ' column' : ' row') +
+      (props.noWrap === true ? ' no-wrap text-no-wrap' : '') +
+      (props.loading === true ? ' q-btn__content--hidden' : '')
   )
 
   return {

package/src/components/btn/use-btn.json

@@ -1,13 +1,16 @@
 {
-  "mixins": [ "composables/private.use-size/use-size" ],
+  "mixins": ["composables/private.use-size/use-size"],
 
   "props": {
-    "type":{
+    "type": {
       "type": "String",
       "desc": "1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag",
       "default": "'button'",
       "examples": [
-        "'a'", "'submit'", "'button'", "'reset'",
+        "'a'",
+        "'submit'",
+        "'button'",
+        "'reset'",
         "'image/png'",
         "# href=\"https://quasar.dev\" target=\"_blank\""
       ],
@@ -15,12 +18,9 @@
     },
 
     "to": {
-      "type": [ "String", "Object" ],
+      "type": ["String", "Object"],
       "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used",
-      "examples": [
-        "'/home/dashboard'",
-        "{ name: 'my-route-name' }"
-      ],
+      "examples": ["'/home/dashboard'", "{ name: 'my-route-name' }"],
       "category": "navigation"
     },
 
@@ -33,7 +33,10 @@
     "href": {
       "type": "String",
       "desc": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props",
-      "examples": [ "'https://quasar.dev'", "# href=\"https://quasar.dev\" target=\"_blank\"" ],
+      "examples": [
+        "'https://quasar.dev'",
+        "# href=\"https://quasar.dev\" target=\"_blank\""
+      ],
       "category": "navigation",
       "addedIn": "v2.4"
     },
@@ -41,15 +44,15 @@
     "target": {
       "type": "String",
       "desc": "Native <a> link target attribute; Use it only with 'to' or 'href' props",
-      "examples": [ "'_blank'", "'_self'", "'_parent'", "'_top'" ],
+      "examples": ["'_blank'", "'_self'", "'_parent'", "'_top'"],
       "category": "navigation",
       "addedIn": "v2.4"
     },
 
-    "label":{
-      "type": [ "String", "Number" ],
+    "label": {
+      "type": ["String", "Number"],
       "desc": "The text that will be shown on the button",
-      "examples": [ "'Button Label'" ],
+      "examples": ["'Button Label'"],
       "category": "content"
     },
 
@@ -117,7 +120,14 @@
     "padding": {
       "type": "String",
       "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
-      "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'", "'2px 2px 5px 7px'" ],
+      "examples": [
+        "'16px'",
+        "'10px 5px'",
+        "'2rem'",
+        "'xs'",
+        "'md lg'",
+        "'2px 2px 5px 7px'"
+      ],
       "category": "style"
     },
 
@@ -157,7 +167,14 @@
       "type": "String",
       "desc": "Label or content alignment",
       "default": "'center'",
-      "values": [ "'left'", "'right'", "'center'", "'around'", "'between'", "'evenly'" ],
+      "values": [
+        "'left'",
+        "'right'",
+        "'center'",
+        "'around'",
+        "'between'",
+        "'evenly'"
+      ],
       "category": "content"
     },
 
@@ -174,7 +191,7 @@
     },
 
     "loading": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)",
       "category": "behavior|state"

package/src/components/btn/use-btn.test.js

@@ -3,9 +3,13 @@ import { describe, test, expect } from 'vitest'
 import { defineComponent } from 'vue'
 
 import useBtn, {
-  btnPadding, defaultSizes, btnDesignOptions,
-  useBtnProps, nonRoundBtnProps,
-  getBtnDesign, getBtnDesignAttr
+  btnPadding,
+  defaultSizes,
+  btnDesignOptions,
+  useBtnProps,
+  nonRoundBtnProps,
+  getBtnDesign,
+  getBtnDesignAttr
 } from './use-btn.js'
 
 describe('[useBtn API]', () => {
@@ -52,16 +56,14 @@ describe('[useBtn API]', () => {
         const wrapper = mount(
           defineComponent({
             template: '<div />',
-            setup () {
+            setup() {
               const result = useBtn({})
               return { result }
             }
           })
         )
 
-        expect(
-          wrapper.vm.result
-        ).toStrictEqual({
+        expect(wrapper.vm.result).toStrictEqual({
           classes: expect.$ref(expect.any(String)),
           style: expect.$ref(expect.any(Object)),
           innerClasses: expect.$ref(expect.any(String)),
@@ -77,64 +79,45 @@ describe('[useBtn API]', () => {
     describe('[(function)getBtnDesign]', () => {
       test('returns correctly with single value', () => {
         for (const prop of btnDesignOptions) {
-          expect(
-            getBtnDesign({ [ prop ]: true })
-          ).toBe(prop)
+          expect(getBtnDesign({ [prop]: true })).toBe(prop)
 
-          expect(
-            getBtnDesign({ [ prop ]: true }, 'default')
-          ).toBe(prop)
+          expect(getBtnDesign({ [prop]: true }, 'default')).toBe(prop)
 
-          expect(
-            getBtnDesign({ [ prop ]: false })
-          ).toBeUndefined()
+          expect(getBtnDesign({ [prop]: false })).toBeUndefined()
 
-          expect(
-            getBtnDesign({ [ prop ]: false }, 'default')
-          ).toBe('default')
+          expect(getBtnDesign({ [prop]: false }, 'default')).toBe('default')
         }
       })
 
       test('returns correctly with multiple values', () => {
         for (const prop of btnDesignOptions) {
-          const propMap = btnDesignOptions
-            .reduce((acc, val) => {
-              if (val !== prop) {
-                acc[ val ] = true
-              }
-
-              return acc
-            }, {})
-
-          expect(
-            getBtnDesign(propMap)
-          ).not.toBe(prop)
-
-          expect(
-            getBtnDesign(propMap, 'default')
-          ).not.toBe('default')
+          const propMap = btnDesignOptions.reduce((acc, val) => {
+            if (val !== prop) {
+              acc[val] = true
+            }
+
+            return acc
+          }, {})
+
+          expect(getBtnDesign(propMap)).not.toBe(prop)
+
+          expect(getBtnDesign(propMap, 'default')).not.toBe('default')
         }
       })
     })
 
     describe('[(function)getBtnDesignAttr]', () => {
       test('has correct return value', () => {
-        expect(
-          getBtnDesignAttr({})
-        ).toStrictEqual({})
+        expect(getBtnDesignAttr({})).toStrictEqual({})
 
-        expect(
-          getBtnDesignAttr({ something: true })
-        ).toStrictEqual({})
+        expect(getBtnDesignAttr({ something: true })).toStrictEqual({})
 
         for (const prop of btnDesignOptions) {
-          expect(
-            getBtnDesignAttr({ [ prop ]: true })
-          ).toStrictEqual({ [ prop ]: true })
+          expect(getBtnDesignAttr({ [prop]: true })).toStrictEqual({
+            [prop]: true
+          })
 
-          expect(
-            getBtnDesignAttr({ [ prop ]: false })
-          ).toStrictEqual({})
+          expect(getBtnDesignAttr({ [prop]: false })).toStrictEqual({})
         }
       })
     })