quasar 2.18.6 → 2.19.0

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

@@ -11,7 +11,7 @@ describe('[useHistory API]', () => {
         const wrapper = mount(
           defineComponent({
             template: '<div />',
-            setup () {
+            setup() {
               const showing = computed(() => false)
               const hide = () => {}
               const hideOnRouteChange = computed(() => false)
@@ -21,9 +21,7 @@ describe('[useHistory API]', () => {
           })
         )
 
-        expect(
-          wrapper.vm.result
-        ).toStrictEqual({
+        expect(wrapper.vm.result).toStrictEqual({
           removeFromHistory: expect.any(Function),
           addToHistory: expect.any(Function)
         })
@@ -35,7 +33,7 @@ describe('[useHistory API]', () => {
         const wrapper = mount(
           defineComponent({
             template: '<div />',
-            setup () {
+            setup() {
               const showing = computed(() => false)
               const hide = () => {}
               const hideOnRouteChange = computed(() => false)
@@ -44,28 +42,20 @@ describe('[useHistory API]', () => {
           })
         )
 
-        expect(
-          () => wrapper.vm.removeFromHistory()
-        ).not.toThrow()
+        expect(() => wrapper.vm.removeFromHistory()).not.toThrow()
 
-        expect(
-          wrapper.vm.addToHistory()
-        ).toBeUndefined()
+        expect(wrapper.vm.addToHistory()).toBeUndefined()
 
-        expect(
-          wrapper.vm.removeFromHistory()
-        ).toBeUndefined()
+        expect(wrapper.vm.removeFromHistory()).toBeUndefined()
 
-        expect(
-          () => wrapper.vm.removeFromHistory()
-        ).not.toThrow()
+        expect(() => wrapper.vm.removeFromHistory()).not.toThrow()
       })
 
       test('does not throw on unmount with showing=true', () => {
         const wrapper = mount(
           defineComponent({
             template: '<div />',
-            setup () {
+            setup() {
               const showing = computed(() => true)
               const hide = () => {}
               const hideOnRouteChange = computed(() => false)
@@ -74,9 +64,7 @@ describe('[useHistory API]', () => {
           })
         )
 
-        expect(
-          () => wrapper.unmount()
-        ).not.toThrow()
+        expect(() => wrapper.unmount()).not.toThrow()
       })
 
       /*

package/src/composables/private.use-key-composition/use-key-composition.js

@@ -1,25 +1,29 @@
 import { client } from '../../plugins/platform/Platform.js'
 
-const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
-const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
+const isJapanese =
+  /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
+const isChinese =
+  /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
 const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/
 const isPlainText = /[a-z0-9_ -]$/i
 
-export default function (onInput) {
-  return function onComposition (e) {
+export default function useKeyComposition(onInput) {
+  return function onComposition(e) {
     if (e.type === 'compositionend' || e.type === 'change') {
       if (e.target.qComposing !== true) return
       e.target.qComposing = false
       onInput(e)
-    }
-    else if (
-      e.type === 'compositionupdate'
-      && e.target.qComposing !== true
-      && typeof e.data === 'string'
+    } else if (
+      e.type === 'compositionupdate' &&
+      e.target.qComposing !== true &&
+      typeof e.data === 'string'
     ) {
-      const isComposing = client.is.firefox === true
-        ? isPlainText.test(e.data) === false
-        : isJapanese.test(e.data) === true || isChinese.test(e.data) === true || isKorean.test(e.data) === true
+      const isComposing =
+        client.is.firefox === true
+          ? isPlainText.test(e.data) === false
+          : isJapanese.test(e.data) === true ||
+            isChinese.test(e.data) === true ||
+            isKorean.test(e.data) === true
 
       if (isComposing === true) {
         e.target.qComposing = true

package/src/composables/private.use-model-toggle/use-model-toggle.js

@@ -8,16 +8,14 @@ export const useModelToggleProps = {
     default: null
   },
 
-  'onUpdate:modelValue': [ Function, Array ]
+  'onUpdate:modelValue': [Function, Array]
 }
 
-export const useModelToggleEmits = [
-  'beforeShow', 'show', 'beforeHide', 'hide'
-]
+export const useModelToggleEmits = ['beforeShow', 'show', 'beforeHide', 'hide']
 
 // handleShow/handleHide -> removeTick(), self (& emit show)
 
-export default function ({
+export default function useModelToggle({
   showing,
   canShow, // optional
   hideOnRouteChange, // optional
@@ -30,23 +28,24 @@ export default function ({
 
   let payload
 
-  function toggle (evt) {
+  function toggle(evt) {
     if (showing.value === true) {
       hide(evt)
-    }
-    else {
+    } else {
       show(evt)
     }
   }
 
-  function show (evt) {
+  function show(evt) {
     if (
-      (props.disable === true)
-      || (evt?.qAnchorHandled === true)
-      || (canShow !== void 0 && canShow(evt) !== true)
-    ) return
+      props.disable === true ||
+      evt?.qAnchorHandled === true ||
+      (canShow !== void 0 && canShow(evt) !== true)
+    ) {
+      return
+    }
 
-    const listener = props[ 'onUpdate:modelValue' ] !== void 0
+    const listener = props['onUpdate:modelValue'] !== void 0
 
     if (listener === true && __QUASAR_SSR_SERVER__ !== true) {
       emit('update:modelValue', true)
@@ -58,12 +57,16 @@ export default function ({
       })
     }
 
-    if (props.modelValue === null || listener === false || __QUASAR_SSR_SERVER__) {
+    if (
+      props.modelValue === null ||
+      listener === false ||
+      __QUASAR_SSR_SERVER__
+    ) {
       processShow(evt)
     }
   }
 
-  function processShow (evt) {
+  function processShow(evt) {
     if (showing.value === true) return
 
     showing.value = true
@@ -72,16 +75,15 @@ export default function ({
 
     if (handleShow !== void 0) {
       handleShow(evt)
-    }
-    else {
+    } else {
       emit('show', evt)
     }
   }
 
-  function hide (evt) {
+  function hide(evt) {
     if (__QUASAR_SSR_SERVER__ || props.disable === true) return
 
-    const listener = props[ 'onUpdate:modelValue' ] !== void 0
+    const listener = props['onUpdate:modelValue'] !== void 0
 
     if (listener === true && __QUASAR_SSR_SERVER__ !== true) {
       emit('update:modelValue', false)
@@ -93,12 +95,16 @@ export default function ({
       })
     }
 
-    if (props.modelValue === null || listener === false || __QUASAR_SSR_SERVER__) {
+    if (
+      props.modelValue === null ||
+      listener === false ||
+      __QUASAR_SSR_SERVER__
+    ) {
       processHide(evt)
     }
   }
 
-  function processHide (evt) {
+  function processHide(evt) {
     if (showing.value === false) return
 
     showing.value = false
@@ -107,19 +113,17 @@ export default function ({
 
     if (handleHide !== void 0) {
       handleHide(evt)
-    }
-    else {
+    } else {
       emit('hide', evt)
     }
   }
 
-  function processModelChange (val) {
+  function processModelChange(val) {
     if (props.disable === true && val === true) {
-      if (props[ 'onUpdate:modelValue' ] !== void 0) {
+      if (props['onUpdate:modelValue'] !== void 0) {
         emit('update:modelValue', false)
       }
-    }
-    else if ((val === true) !== showing.value) {
+    } else if ((val === true) !== showing.value) {
       const fn = val === true ? processShow : processHide
       fn(payload)
     }
@@ -128,16 +132,21 @@ export default function ({
   watch(() => props.modelValue, processModelChange)
 
   if (hideOnRouteChange !== void 0 && vmHasRouter(vm) === true) {
-    watch(() => proxy.$route.fullPath, () => {
-      if (hideOnRouteChange.value === true && showing.value === true) {
-        hide()
+    watch(
+      () => proxy.$route.fullPath,
+      () => {
+        if (hideOnRouteChange.value === true && showing.value === true) {
+          hide()
+        }
       }
-    })
+    )
   }
 
-  processOnMount === true && onMounted(() => {
-    processModelChange(props.modelValue)
-  })
+  if (processOnMount === true) {
+    onMounted(() => {
+      processModelChange(props.modelValue)
+    })
+  }
 
   // expose public methods
   const publicMethods = { show, hide, toggle }

package/src/composables/private.use-model-toggle/use-model-toggle.json

@@ -1,11 +1,11 @@
 {
   "props": {
     "model-value": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "desc": "Model of the component defining shown/hidden state; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
       "default": "null",
       "category": "model",
-      "examples": [ "# v-model=\"state\"" ]
+      "examples": ["# v-model=\"state\""]
     }
   },
 

package/src/composables/private.use-panel/use-panel.child.json

@@ -4,7 +4,7 @@
       "type": "Any",
       "desc": "Panel name",
       "required": true,
-      "examples": [ "'accounts'", "'firstPanel'", "1" ],
+      "examples": ["'accounts'", "'firstPanel'", "1"],
       "category": "general"
     },
 

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

@@ -1,4 +1,12 @@
-import { h, ref, computed, watch, getCurrentInstance, Transition, KeepAlive } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  getCurrentInstance,
+  Transition,
+  KeepAlive
+} from 'vue'
 
 import TouchSwipe from '../../directives/touch-swipe/TouchSwipe.js'
 
@@ -14,11 +22,16 @@ export const usePanelChildProps = {
 }
 
 const PanelWrapper = {
-  setup (_, { slots }) {
-    return () => h('div', {
-      class: 'q-panel scroll',
-      role: 'tabpanel'
-    }, hSlot(slots.default))
+  setup(_, { slots }) {
+    return () =>
+      h(
+        'div',
+        {
+          class: 'q-panel scroll',
+          role: 'tabpanel'
+        },
+        hSlot(slots.default)
+      )
   }
 }
 
@@ -35,19 +48,23 @@ export const usePanelProps = {
   transitionPrev: String,
   transitionNext: String,
   transitionDuration: {
-    type: [ String, Number ],
+    type: [String, Number],
     default: 300
   },
 
   keepAlive: Boolean,
-  keepAliveInclude: [ String, Array, RegExp ],
-  keepAliveExclude: [ String, Array, RegExp ],
+  keepAliveInclude: [String, Array, RegExp],
+  keepAliveExclude: [String, Array, RegExp],
   keepAliveMax: Number
 }
 
-export const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transition' ]
+export const usePanelEmits = [
+  'update:modelValue',
+  'beforeTransition',
+  'transition'
+]
 
-export default function () {
+export default function usePanel() {
   const { props, emit, proxy } = getCurrentInstance()
   const { getCache } = useRenderCache()
   const { registerTimeout } = useTimeout()
@@ -66,14 +83,15 @@ export default function () {
    */
   const panelIndex = { value: null }
 
-  function onSwipe (evt) {
+  function onSwipe(evt) {
     const dir = props.vertical === true ? 'up' : 'left'
-    goToPanelByOffset((proxy.$q.lang.rtl === true ? -1 : 1) * (evt.direction === dir ? 1 : -1))
+    goToPanelByOffset(
+      (proxy.$q.lang.rtl === true ? -1 : 1) * (evt.direction === dir ? 1 : -1)
+    )
   }
 
-  const panelDirectives = computed(() => {
-    // if props.swipeable
-    return [ [
+  const panelDirectives = computed(() => [
+    [
       TouchSwipe,
       onSwipe,
       void 0,
@@ -82,26 +100,29 @@ export default function () {
         vertical: props.vertical,
         mouse: true
       }
-    ] ]
-  })
+    ]
+  ])
 
-  const transitionPrev = computed(() =>
-    props.transitionPrev || `slide-${ props.vertical === true ? 'down' : 'right' }`
+  const transitionPrev = computed(
+    () =>
+      props.transitionPrev ||
+      `slide-${props.vertical === true ? 'down' : 'right'}`
   )
 
-  const transitionNext = computed(() =>
-    props.transitionNext || `slide-${ props.vertical === true ? 'up' : 'left' }`
+  const transitionNext = computed(
+    () =>
+      props.transitionNext || `slide-${props.vertical === true ? 'up' : 'left'}`
   )
 
   const transitionStyle = computed(
-    () => `--q-transition-duration: ${ props.transitionDuration }ms`
+    () => `--q-transition-duration: ${props.transitionDuration}ms`
   )
 
-  const contentKey = computed(() => (
+  const contentKey = computed(() =>
     typeof props.modelValue === 'string' || typeof props.modelValue === 'number'
       ? props.modelValue
       : String(props.modelValue)
-  ))
+  )
 
   const keepAliveProps = computed(() => ({
     include: props.keepAliveInclude,
@@ -109,77 +130,84 @@ export default function () {
     max: props.keepAliveMax
   }))
 
-  const needsUniqueKeepAliveWrapper = computed(() =>
-    props.keepAliveInclude !== void 0
-    || props.keepAliveExclude !== void 0
+  const needsUniqueKeepAliveWrapper = computed(
+    () => props.keepAliveInclude !== void 0 || props.keepAliveExclude !== void 0
   )
 
-  watch(() => props.modelValue, (newVal, oldVal) => {
-    const index = isValidPanelName(newVal) === true
-      ? getPanelIndex(newVal)
-      : -1
+  watch(
+    () => props.modelValue,
+    (newVal, oldVal) => {
+      const index =
+        isValidPanelName(newVal) === true ? getPanelIndex(newVal) : -1
 
-    if (forcedPanelTransition !== true) {
-      updatePanelTransition(
-        index === -1 ? 0 : (index < getPanelIndex(oldVal) ? -1 : 1)
-      )
-    }
+      if (forcedPanelTransition !== true) {
+        updatePanelTransition(
+          index === -1 ? 0 : index < getPanelIndex(oldVal) ? -1 : 1
+        )
+      }
 
-    if (panelIndex.value !== index) {
-      panelIndex.value = index
-      emit('beforeTransition', newVal, oldVal)
-      registerTimeout(() => {
-        emit('transition', newVal, oldVal)
-      }, props.transitionDuration)
+      if (panelIndex.value !== index) {
+        panelIndex.value = index
+        emit('beforeTransition', newVal, oldVal)
+        registerTimeout(() => {
+          emit('transition', newVal, oldVal)
+        }, props.transitionDuration)
+      }
     }
-  })
+  )
 
-  function nextPanel () { goToPanelByOffset(1) }
-  function previousPanel () { goToPanelByOffset(-1) }
+  function nextPanel() {
+    goToPanelByOffset(1)
+  }
+  function previousPanel() {
+    goToPanelByOffset(-1)
+  }
 
-  function goToPanel (name) {
+  function goToPanel(name) {
     emit('update:modelValue', name)
   }
 
-  function isValidPanelName (name) {
+  function isValidPanelName(name) {
     return name !== void 0 && name !== null && name !== ''
   }
 
-  function getPanelIndex (name) {
-    return panels.findIndex(panel => {
-      return panel.props.name === name
-        && panel.props.disable !== ''
-        && panel.props.disable !== true
-    })
+  function getPanelIndex(name) {
+    return panels.findIndex(
+      panel =>
+        panel.props.name === name &&
+        panel.props.disable !== '' &&
+        panel.props.disable !== true
+    )
   }
 
-  function getEnabledPanels () {
-    return panels.filter(panel => {
-      return panel.props.disable !== ''
-        && panel.props.disable !== true
-    })
+  function getEnabledPanels() {
+    return panels.filter(
+      panel => panel.props.disable !== '' && panel.props.disable !== true
+    )
   }
 
-  function updatePanelTransition (direction) {
-    const val = direction !== 0 && props.animated === true && panelIndex.value !== -1
-      ? 'q-transition--' + (direction === -1 ? transitionPrev.value : transitionNext.value)
-      : null
+  function updatePanelTransition(direction) {
+    const val =
+      direction !== 0 && props.animated === true && panelIndex.value !== -1
+        ? 'q-transition--' +
+          (direction === -1 ? transitionPrev.value : transitionNext.value)
+        : null
 
     if (panelTransition.value !== val) {
       panelTransition.value = val
     }
   }
 
-  function goToPanelByOffset (direction, startIndex = panelIndex.value) {
+  function goToPanelByOffset(direction, startIndex = panelIndex.value) {
     let index = startIndex + direction
 
     while (index !== -1 && index < panels.length) {
-      const opt = panels[ index ]
+      const opt = panels[index]
 
       if (
-        opt !== void 0
-        && opt.props.disable !== ''
-        && opt.props.disable !== true
+        opt !== void 0 &&
+        opt.props.disable !== '' &&
+        opt.props.disable !== true
       ) {
         updatePanelTransition(direction)
         forcedPanelTransition = true
@@ -194,12 +222,17 @@ export default function () {
       index += direction
     }
 
-    if (props.infinite === true && panels.length !== 0 && startIndex !== -1 && startIndex !== panels.length) {
+    if (
+      props.infinite === true &&
+      panels.length !== 0 &&
+      startIndex !== -1 &&
+      startIndex !== panels.length
+    ) {
       goToPanelByOffset(direction, direction === -1 ? panels.length : -1)
     }
   }
 
-  function updatePanelIndex () {
+  function updatePanelIndex() {
     const index = getPanelIndex(props.modelValue)
 
     if (panelIndex.value !== index) {
@@ -209,17 +242,21 @@ export default function () {
     return true
   }
 
-  function getPanelContentChild () {
-    const panel = isValidPanelName(props.modelValue) === true
-      && updatePanelIndex()
-      && panels[ panelIndex.value ]
+  function getPanelContentChild() {
+    const panel =
+      isValidPanelName(props.modelValue) === true &&
+      updatePanelIndex() &&
+      panels[panelIndex.value]
 
     return props.keepAlive === true
       ? [
           h(KeepAlive, keepAliveProps.value, [
             h(
               needsUniqueKeepAliveWrapper.value === true
-                ? getCache(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value }))
+                ? getCache(contentKey.value, () => ({
+                    ...PanelWrapper,
+                    name: contentKey.value
+                  }))
                 : PanelWrapper,
               { key: contentKey.value, style: transitionStyle.value },
               () => panel
@@ -227,36 +264,39 @@ export default function () {
           ])
         ]
       : [
-          h('div', {
-            class: 'q-panel scroll',
-            style: transitionStyle.value,
-            key: contentKey.value,
-            role: 'tabpanel'
-          }, [ panel ])
+          h(
+            'div',
+            {
+              class: 'q-panel scroll',
+              style: transitionStyle.value,
+              key: contentKey.value,
+              role: 'tabpanel'
+            },
+            [panel]
+          )
         ]
   }
 
-  function getPanelContent () {
+  function getPanelContent() {
     if (panels.length === 0) return
 
     return props.animated === true
-      ? [ h(Transition, { name: panelTransition.value }, getPanelContentChild) ]
+      ? [h(Transition, { name: panelTransition.value }, getPanelContentChild)]
       : getPanelContentChild()
   }
 
-  function updatePanelsList (slots) {
-    panels = getNormalizedVNodes(
-      hSlot(slots.default, [])
-    ).filter(
-      panel => panel.props !== null
-        && panel.props.slot === void 0
-        && isValidPanelName(panel.props.name) === true
+  function updatePanelsList(slots) {
+    panels = getNormalizedVNodes(hSlot(slots.default, [])).filter(
+      panel =>
+        panel.props !== null &&
+        panel.props.slot === void 0 &&
+        isValidPanelName(panel.props.name) === true
     )
 
     return panels.length
   }
 
-  function getPanels () {
+  function getPanels() {
     return panels
   }