quasar 2.18.6 → 2.19.0

package/src/composables/private.use-router-link/use-router-link.json

@@ -1,12 +1,9 @@
 {
   "props": {
     "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"
     },
 
@@ -26,7 +23,7 @@
       "type": "String",
       "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used",
       "default": "'q-router-link--active'",
-      "examples": [ "'my-active-class'" ],
+      "examples": ["'my-active-class'"],
       "category": "navigation"
     },
 
@@ -34,14 +31,14 @@
       "type": "String",
       "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used",
       "default": "'q-router-link--exact-active'",
-      "examples": [ "'my-exact-active-class'" ],
+      "examples": ["'my-exact-active-class'"],
       "category": "navigation"
     },
 
     "href": {
       "type": "String",
       "desc": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
-      "examples": [ "'https://quasar.dev'" ],
+      "examples": ["'https://quasar.dev'"],
       "category": "navigation",
       "addedIn": "v2.4"
     },
@@ -49,7 +46,7 @@
     "target": {
       "type": "String",
       "desc": "Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
-      "examples": [ "'_blank'", "'_self'", "'_parent'", "'_top'" ],
+      "examples": ["'_blank'", "'_self'", "'_parent'", "'_top'"],
       "category": "navigation",
       "addedIn": "v2.4"
     },

package/src/composables/private.use-scroll-target/use-scroll-target.js

@@ -2,36 +2,39 @@ import { ref, watch, onBeforeUnmount } from 'vue'
 
 import { listenOpts } from '../../utils/event/event.js'
 
-export default function (props, configureScrollTarget) {
+export default function useScrollTarget(props, configureScrollTarget) {
   const localScrollTarget = ref(null)
   let scrollFn
 
-  function changeScrollEvent (scrollTarget, fn) {
-    const fnProp = `${ fn !== void 0 ? 'add' : 'remove' }EventListener`
+  function changeScrollEvent(scrollTarget, fn) {
+    const fnProp = `${fn !== void 0 ? 'add' : 'remove'}EventListener`
     const fnHandler = fn !== void 0 ? fn : scrollFn
 
     if (scrollTarget !== window) {
-      scrollTarget[ fnProp ]('scroll', fnHandler, listenOpts.passive)
+      scrollTarget[fnProp]('scroll', fnHandler, listenOpts.passive)
     }
 
-    window[ fnProp ]('scroll', fnHandler, listenOpts.passive)
+    window[fnProp]('scroll', fnHandler, listenOpts.passive)
 
     scrollFn = fn
   }
 
-  function unconfigureScrollTarget () {
+  function unconfigureScrollTarget() {
     if (localScrollTarget.value !== null) {
       changeScrollEvent(localScrollTarget.value)
       localScrollTarget.value = null
     }
   }
 
-  const noParentEventWatcher = watch(() => props.noParentEvent, () => {
-    if (localScrollTarget.value !== null) {
-      unconfigureScrollTarget()
-      configureScrollTarget()
+  const noParentEventWatcher = watch(
+    () => props.noParentEvent,
+    () => {
+      if (localScrollTarget.value !== null) {
+        unconfigureScrollTarget()
+        configureScrollTarget()
+      }
     }
-  })
+  )
 
   onBeforeUnmount(noParentEventWatcher)
 

package/src/composables/private.use-size/use-size.js

@@ -12,11 +12,13 @@ export const useSizeProps = {
   size: String
 }
 
-export default function (props, sizes = useSizeDefaults) {
+export default function useSize(props, sizes = useSizeDefaults) {
   // return sizeStyle
-  return computed(() => (
+  return computed(() =>
     props.size !== void 0
-      ? { fontSize: props.size in sizes ? `${ sizes[ props.size ] }px` : props.size }
+      ? {
+          fontSize: props.size in sizes ? `${sizes[props.size]}px` : props.size
+        }
       : null
-  ))
+  )
 }

package/src/composables/private.use-size/use-size.json

@@ -3,7 +3,7 @@
     "size": {
       "type": "String",
       "desc": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)",
-      "examples": [ "'16px'", "'2rem'", "'xs'", "'md'" ],
+      "examples": ["'16px'", "'2rem'", "'xs'", "'md'"],
       "category": "style"
     }
   }

package/src/composables/private.use-size/use-size.test.js

@@ -28,7 +28,7 @@ describe('[useSize API]', () => {
 
       test('should set the size with standard size names', () => {
         const { value } = useSize({ size: 'sm' })
-        expect(value.fontSize).toBe(`${ useSizeDefaults.sm }px`)
+        expect(value.fontSize).toBe(`${useSizeDefaults.sm}px`)
       })
 
       test('should set the size with custom size names', () => {

package/src/composables/private.use-transition/use-transition.js

@@ -12,30 +12,36 @@ export const useTransitionProps = {
   },
 
   transitionDuration: {
-    type: [ String, Number ],
+    type: [String, Number],
     default: 300
   }
 }
 
-export default function (props, defaultShowFn = () => {}, defaultHideFn = () => {}) {
+export default function useTransition(
+  props,
+  defaultShowFn = () => {},
+  defaultHideFn = () => {}
+) {
   return {
     transitionProps: computed(() => {
-      const show = `q-transition--${ props.transitionShow || defaultShowFn() }`
-      const hide = `q-transition--${ props.transitionHide || defaultHideFn() }`
+      const show = `q-transition--${props.transitionShow || defaultShowFn()}`
+      const hide = `q-transition--${props.transitionHide || defaultHideFn()}`
 
       return {
         appear: true,
 
-        enterFromClass: `${ show }-enter-from`,
-        enterActiveClass: `${ show }-enter-active`,
-        enterToClass: `${ show }-enter-to`,
+        enterFromClass: `${show}-enter-from`,
+        enterActiveClass: `${show}-enter-active`,
+        enterToClass: `${show}-enter-to`,
 
-        leaveFromClass: `${ hide }-leave-from`,
-        leaveActiveClass: `${ hide }-leave-active`,
-        leaveToClass: `${ hide }-leave-to`
+        leaveFromClass: `${hide}-leave-from`,
+        leaveActiveClass: `${hide}-leave-active`,
+        leaveToClass: `${hide}-leave-to`
       }
     }),
 
-    transitionStyle: computed(() => `--q-transition-duration: ${ props.transitionDuration }ms`)
+    transitionStyle: computed(
+      () => `--q-transition-duration: ${props.transitionDuration}ms`
+    )
   }
 }

package/src/composables/private.use-transition/use-transition.json

@@ -11,7 +11,7 @@
     },
 
     "transition-duration": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Transition duration (in milliseconds, without unit)",
       "default": "300",
       "category": "transition"

package/src/composables/private.use-transition/use-transition.test.js

@@ -15,12 +15,8 @@ describe('[useTransition API]', () => {
   describe('[Functions]', () => {
     describe('[(function)default]', () => {
       test('has correct return value', () => {
-        expect(
-          useTransition({})
-        ).toStrictEqual({
-          transitionStyle: expect.$ref(
-            expect.any(String)
-          ),
+        expect(useTransition({})).toStrictEqual({
+          transitionStyle: expect.$ref(expect.any(String)),
 
           transitionProps: expect.$ref({
             appear: expect.any(Boolean),
@@ -41,9 +37,7 @@ describe('[useTransition API]', () => {
           transitionDuration: 555
         })
 
-        expect(
-          transitionStyle.value
-        ).toMatch(/555ms/)
+        expect(transitionStyle.value).toMatch(/555ms/)
       })
 
       test('props.transitionShow is handled correctly', () => {
@@ -51,9 +45,7 @@ describe('[useTransition API]', () => {
           transitionShow: 'some-transition'
         })
 
-        expect(
-          transitionProps.value
-        ).toMatchObject({
+        expect(transitionProps.value).toMatchObject({
           enterFromClass: 'q-transition--some-transition-enter-from',
           enterActiveClass: 'q-transition--some-transition-enter-active',
           enterToClass: 'q-transition--some-transition-enter-to'
@@ -65,9 +57,7 @@ describe('[useTransition API]', () => {
           transitionHide: 'some-transition'
         })
 
-        expect(
-          transitionProps.value
-        ).toMatchObject({
+        expect(transitionProps.value).toMatchObject({
           leaveFromClass: 'q-transition--some-transition-leave-from',
           leaveActiveClass: 'q-transition--some-transition-leave-active',
           leaveToClass: 'q-transition--some-transition-leave-to'
@@ -81,9 +71,7 @@ describe('[useTransition API]', () => {
           () => 'hide'
         )
 
-        expect(
-          transitionProps.value
-        ).toMatchObject({
+        expect(transitionProps.value).toMatchObject({
           enterFromClass: 'q-transition--show-enter-from',
           enterActiveClass: 'q-transition--show-enter-active',
           enterToClass: 'q-transition--show-enter-to',
@@ -101,9 +89,7 @@ describe('[useTransition API]', () => {
           () => 'Y'
         )
 
-        expect(
-          transitionProps.value
-        ).toMatchObject({
+        expect(transitionProps.value).toMatchObject({
           enterFromClass: 'q-transition--show-enter-from',
           enterActiveClass: 'q-transition--show-enter-active',
           enterToClass: 'q-transition--show-enter-to',

package/src/composables/private.use-validate/use-validate.js

@@ -5,7 +5,7 @@ import { testPattern } from '../../utils/patterns/patterns.js'
 import debounce from '../../utils/debounce/debounce.js'
 import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
-const lazyRulesValues = [ true, false, 'ondemand' ]
+const lazyRulesValues = [true, false, 'ondemand']
 
 export const useValidateProps = {
   modelValue: {},
@@ -20,13 +20,13 @@ export const useValidateProps = {
   rules: Array,
   reactiveRules: Boolean,
   lazyRules: {
-    type: [ Boolean, String ],
+    type: [Boolean, String],
     default: false, // statement unneeded but avoids future vue implementation changes
     validator: v => lazyRulesValues.includes(v)
   }
 }
 
-export default function (focused, innerLoading) {
+export default function useValidate(focused, innerLoading) {
   const { props, proxy } = getCurrentInstance()
 
   const innerError = ref(false)
@@ -35,82 +35,91 @@ export default function (focused, innerLoading) {
 
   useFormChild({ validate, resetValidation })
 
-  let validateIndex = 0, unwatchRules
+  let validateIndex = 0,
+    unwatchRules
 
-  const hasRules = computed(() =>
-    props.rules !== void 0
-    && props.rules !== null
-    && props.rules.length !== 0
+  const hasRules = computed(
+    () =>
+      props.rules !== void 0 && props.rules !== null && props.rules.length !== 0
   )
 
-  const canDebounceValidate = computed(() => (
-    props.disable !== true
-    && hasRules.value === true
-    // Should not have a validation in progress already;
-    // It might mean that focus switched to submit btn and
-    // QForm's submit() has been called already (ENTER key)
-    && innerLoading.value === false
-  ))
-
-  const hasError = computed(() =>
-    props.error === true || innerError.value === true
+  const canDebounceValidate = computed(
+    () =>
+      props.disable !== true &&
+      hasRules.value === true &&
+      // Should not have a validation in progress already;
+      // It might mean that focus switched to submit btn and
+      // QForm's submit() has been called already (ENTER key)
+      innerLoading.value === false
   )
 
-  const errorMessage = computed(() => (
+  const hasError = computed(
+    () => props.error === true || innerError.value === true
+  )
+
+  const errorMessage = computed(() =>
     typeof props.errorMessage === 'string' && props.errorMessage.length !== 0
       ? props.errorMessage
       : innerErrorMessage.value
-  ))
+  )
 
-  watch(() => props.modelValue, () => {
-    isDirtyModel.value = true
+  watch(
+    () => props.modelValue,
+    () => {
+      isDirtyModel.value = true
 
-    if (
-      canDebounceValidate.value === true
-      // trigger validation if not using any kind of lazy-rules
-      && props.lazyRules === false
-    ) {
-      debouncedValidate()
+      if (
+        canDebounceValidate.value === true &&
+        // trigger validation if not using any kind of lazy-rules
+        props.lazyRules === false
+      ) {
+        debouncedValidate()
+      }
     }
-  })
+  )
 
-  function onRulesChange () {
+  function onRulesChange() {
     if (
-      props.lazyRules !== 'ondemand'
-      && canDebounceValidate.value === true
-      && isDirtyModel.value === true
+      props.lazyRules !== 'ondemand' &&
+      canDebounceValidate.value === true &&
+      isDirtyModel.value === true
     ) {
       debouncedValidate()
     }
   }
 
-  watch(() => props.reactiveRules, val => {
-    if (val === true) {
-      if (unwatchRules === void 0) {
-        unwatchRules = watch(() => props.rules, onRulesChange, { immediate: true, deep: true })
+  watch(
+    () => props.reactiveRules,
+    val => {
+      if (val === true) {
+        if (unwatchRules === void 0) {
+          unwatchRules = watch(() => props.rules, onRulesChange, {
+            immediate: true,
+            deep: true
+          })
+        }
+      } else if (unwatchRules !== void 0) {
+        unwatchRules()
+        unwatchRules = void 0
       }
-    }
-    else if (unwatchRules !== void 0) {
-      unwatchRules()
-      unwatchRules = void 0
-    }
-  }, { immediate: true })
+    },
+    { immediate: true }
+  )
 
   watch(() => props.lazyRules, onRulesChange)
 
   watch(focused, val => {
     if (val === true) {
       isDirtyModel.value = true
-    }
-    else if (
-      canDebounceValidate.value === true
-      && props.lazyRules !== 'ondemand'
+    } else if (
+      canDebounceValidate.value === true &&
+      props.lazyRules !== 'ondemand'
     ) {
       debouncedValidate()
     }
   })
 
-  function resetValidation () {
+  function resetValidation() {
     validateIndex++
     innerLoading.value = false
     isDirtyModel.value = false
@@ -125,22 +134,22 @@ export default function (focused, innerLoading) {
    *   - false (validation failed)
    *   - Promise (pending async validation)
    */
-  function validate (val = props.modelValue) {
-    if (
-      props.disable === true
-      || hasRules.value === false
-    ) {
+  function validate(val = props.modelValue) {
+    if (props.disable === true || hasRules.value === false) {
       return true
     }
 
     const index = ++validateIndex
 
-    const setDirty = innerLoading.value !== true
-      ? () => { isDirtyModel.value = true }
-      : () => {}
+    const setDirty =
+      innerLoading.value !== true
+        ? () => {
+            isDirtyModel.value = true
+          }
+        : () => {}
 
     const update = (err, msg) => {
-      err === true && setDirty()
+      if (err === true) setDirty()
 
       innerError.value = err
       innerErrorMessage.value = msg || null
@@ -150,21 +159,19 @@ export default function (focused, innerLoading) {
     const promises = []
 
     for (let i = 0; i < props.rules.length; i++) {
-      const rule = props.rules[ i ]
+      const rule = props.rules[i]
       let res
 
       if (typeof rule === 'function') {
         res = rule(val, testPattern)
-      }
-      else if (typeof rule === 'string' && testPattern[ rule ] !== void 0) {
-        res = testPattern[ rule ](val)
+      } else if (typeof rule === 'string' && testPattern[rule] !== void 0) {
+        res = testPattern[rule](val)
       }
 
       if (res === false || typeof res === 'string') {
         update(true, res)
         return false
-      }
-      else if (res !== true && res !== void 0) {
+      } else if (res !== true && res !== void 0) {
         promises.push(res)
       }
     }
@@ -178,13 +185,17 @@ export default function (focused, innerLoading) {
 
     return Promise.all(promises).then(
       res => {
-        if (res === void 0 || Array.isArray(res) === false || res.length === 0) {
-          index === validateIndex && update(false)
+        if (
+          res === void 0 ||
+          Array.isArray(res) === false ||
+          res.length === 0
+        ) {
+          if (index === validateIndex) update(false)
           return true
         }
 
         const msg = res.find(r => r === false || typeof r === 'string')
-        index === validateIndex && update(msg !== void 0, msg)
+        if (index === validateIndex) update(msg !== void 0, msg)
         return msg === void 0
       },
       e => {

package/src/composables/private.use-validate/use-validate.json

@@ -7,7 +7,7 @@
     },
 
     "error": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Does field have validation errors?",
       "category": "validation"
@@ -16,7 +16,7 @@
     "error-message": {
       "type": "String",
       "desc": "Validation error message (gets displayed only if 'error' is set to 'true')",
-      "examples": [ "'Username must have at least 5 characters'" ],
+      "examples": ["'Username must have at least 5 characters'"],
       "category": "validation"
     },
 
@@ -31,9 +31,9 @@
       "tsType": "ValidationRule",
       "desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
       "examples": [
-        "[ val => val.length <= 3 || 'Please use maximum 3 characters' ]",
-        "[ 'fulltime' ]",
-        "[ (val, rules) => rules.email(val) || 'Please enter a valid email address' ]"
+        "[val => val.length <= 3 || 'Please use maximum 3 characters']",
+        "['fulltime']",
+        "[(val, rules) => rules.email(val) || 'Please enter a valid email address']"
       ],
       "category": "validation"
     },
@@ -45,10 +45,10 @@
     },
 
     "lazy-rules": {
-      "type": [ "Boolean", "String" ],
+      "type": ["Boolean", "String"],
       "desc": "If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper QForm submits itself",
       "default": "false",
-      "values": [ "true", "false", "'ondemand'" ],
+      "values": ["true", "false", "'ondemand'"],
       "category": "validation"
     }
   },
@@ -69,12 +69,9 @@
         }
       },
       "returns": {
-        "type": [ "Boolean", "Promise<boolean>" ],
+        "type": ["Boolean", "Promise<boolean>"],
         "desc": "True/false if no async rules, otherwise a Promise with the outcome (true -> validation was a success, false -> invalid models detected)",
-        "examples": [
-          "true",
-          "validate().then(outcome => { ... })"
-        ]
+        "examples": ["true", "validate().then(outcome => { ... })"]
       }
     }
   },

package/src/composables/use-dialog-plugin-component/use-dialog-plugin-component.js

@@ -5,7 +5,7 @@ import getEmitsObject from '../../utils/private.get-emits-object/get-emits-objec
 // To be used for the custom component
 // used on a Dialog plugin
 
-export default function useDialogPluginComponent () {
+export default function useDialogPluginComponent() {
   const { emit, proxy } = getCurrentInstance()
 
   // we need a Vue reference to the QDialog
@@ -15,15 +15,21 @@ export default function useDialogPluginComponent () {
   // function is called returns dialogRef variable
   const dialogRef = ref(null)
 
-  function show () { dialogRef.value.show() }
-  function hide () { dialogRef.value.hide() }
+  function show() {
+    dialogRef.value.show()
+  }
+  function hide() {
+    dialogRef.value.hide()
+  }
 
-  function onDialogOK (payload) {
+  function onDialogOK(payload) {
     emit('ok', payload)
     hide()
   }
 
-  function onDialogHide () { emit('hide') }
+  function onDialogHide() {
+    emit('hide')
+  }
 
   // expose public methods required by Dialog plugin
   Object.assign(proxy, { show, hide })
@@ -37,7 +43,7 @@ export default function useDialogPluginComponent () {
 }
 
 // Don't forget to update the types in "ui/types/composables.d.ts"
-const emits = [ 'ok', 'hide' ]
+const emits = ['ok', 'hide']
 
 useDialogPluginComponent.emits = emits
 useDialogPluginComponent.emitsObject = getEmitsObject(emits)

package/src/composables/use-form/private.use-form.js

@@ -4,7 +4,7 @@ export const useFormProps = {
   name: String
 }
 
-export function useFormAttrs (props) {
+export function useFormAttrs(props) {
   return computed(() => ({
     type: 'hidden',
     name: props.name,
@@ -12,9 +12,9 @@ export function useFormAttrs (props) {
   }))
 }
 
-export function useFormInject (formAttrs = {}) {
+export function useFormInject(formAttrs = {}) {
   return (child, action, className) => {
-    child[ action ](
+    child[action](
       h('input', {
         class: 'hidden' + (className || ''),
         ...formAttrs.value
@@ -23,6 +23,6 @@ export function useFormInject (formAttrs = {}) {
   }
 }
 
-export function useFormInputNameAttr (props) {
+export function useFormInputNameAttr(props) {
   return computed(() => props.name || props.for)
 }

package/src/composables/use-form/private.use-form.json

@@ -3,7 +3,7 @@
     "name": {
       "type": "String",
       "desc": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL",
-      "examples": [ "'car_id'" ],
+      "examples": ["'car_id'"],
       "category": "behavior"
     }
   }