quasar 2.18.7 → 2.19.1

package/src/components/popup-edit/QPopupEdit.json

@@ -7,13 +7,13 @@
     "model-value": {
       "extends": "model-value",
       "type": "Any",
-      "examples": [ "# v-model=\"myValue\"" ]
+      "examples": ["# v-model=\"myValue\""]
     },
 
     "title": {
       "type": "String",
       "desc": "Optional title (unless 'title' slot is used)",
-      "examples": [ "'Calories'" ],
+      "examples": ["'Calories'"],
       "category": "content"
     },
 
@@ -26,14 +26,14 @@
     "label-set": {
       "type": "String",
       "desc": "Override Set button label",
-      "examples": [ "'OK'" ],
+      "examples": ["'OK'"],
       "category": "content"
     },
 
     "label-cancel": {
       "type": "String",
       "desc": "Override Cancel button label",
-      "examples": [ "'Cancel'" ],
+      "examples": ["'Cancel'"],
       "category": "content"
     },
 
@@ -55,7 +55,7 @@
         "value": {
           "type": "Any",
           "desc": "Model to validate",
-          "examples": [ "'My car'" ]
+          "examples": ["'My car'"]
         }
       },
       "returns": {
@@ -63,7 +63,7 @@
         "desc": "Is the model valid or not?"
       },
       "default": "() => true",
-      "examples": [ "value => value !== 0" ],
+      "examples": ["value => value !== 0"],
       "category": "model"
     },
 
@@ -89,9 +89,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'"
       ],
       "category": "position",
       "passthrough": true
@@ -101,9 +113,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'"
       ],
       "category": "position",
       "passthrough": true
@@ -112,7 +136,7 @@
     "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": "style",
       "passthrough": true
     },
@@ -167,12 +191,12 @@
         "initialValue": {
           "type": "Any",
           "desc": "Initial value",
-          "examples": [ "0.241", "'Text'" ]
+          "examples": ["0.241", "'Text'"]
         },
         "value": {
           "type": "Any",
           "desc": "Current value",
-          "examples": [ "0.241", "'Text'" ]
+          "examples": ["0.241", "'Text'"]
         },
         "validate": {
           "type": "Function",
@@ -182,7 +206,7 @@
               "type": "Any",
               "required": true,
               "desc": "Value to be checked",
-              "examples": [ "0", "'Changed text'" ]
+              "examples": ["0", "'Changed text'"]
             }
           },
           "returns": {

package/src/components/popup-edit/index.js

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

package/src/components/popup-proxy/QPopupProxy.js

@@ -3,7 +3,9 @@ import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 import QDialog from '../dialog/QDialog.js'
 import QMenu from '../menu/QMenu.js'
 
-import useAnchor, { useAnchorProps } from '../../composables/private.use-anchor/use-anchor.js'
+import useAnchor, {
+  useAnchorProps
+} from '../../composables/private.use-anchor/use-anchor.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
@@ -15,14 +17,14 @@ export default createComponent({
     ...useAnchorProps,
 
     breakpoint: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 450
     }
   },
 
-  emits: [ 'show', 'hide' ],
+  emits: ['show', 'hide'],
 
-  setup (props, { slots, emit, attrs }) {
+  setup(props, { slots, emit, attrs }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
@@ -32,30 +34,34 @@ export default createComponent({
 
     const { canShow } = useAnchor({ showing })
 
-    function getType () {
-      return $q.screen.width < breakpoint.value || $q.screen.height < breakpoint.value
+    function getType() {
+      return $q.screen.width < breakpoint.value ||
+        $q.screen.height < breakpoint.value
         ? 'dialog'
         : 'menu'
     }
 
     const type = ref(getType())
 
-    const popupProps = computed(() => (
-      type.value === 'menu' ? { maxHeight: '99vh' } : {})
+    const popupProps = computed(() =>
+      type.value === 'menu' ? { maxHeight: '99vh' } : {}
     )
 
-    watch(() => getType(), val => {
-      if (showing.value !== true) {
-        type.value = val
+    watch(
+      () => getType(),
+      val => {
+        if (showing.value !== true) {
+          type.value = val
+        }
       }
-    })
+    )
 
-    function onShow (evt) {
+    function onShow(evt) {
       showing.value = true
       emit('show', evt)
     }
 
-    function onHide (evt) {
+    function onHide(evt) {
       showing.value = false
       type.value = getType()
       emit('hide', evt)
@@ -63,9 +69,15 @@ export default createComponent({
 
     // expose public methods
     Object.assign(proxy, {
-      show (evt) { canShow(evt) === true && popupRef.value.show(evt) },
-      hide (evt) { popupRef.value.hide(evt) },
-      toggle (evt) { popupRef.value.toggle(evt) }
+      show(evt) {
+        if (canShow(evt) === true) popupRef.value.show(evt)
+      },
+      hide(evt) {
+        popupRef.value.hide(evt)
+      },
+      toggle(evt) {
+        popupRef.value.toggle(evt)
+      }
     })
 
     injectProp(proxy, 'currentComponent', () => ({
@@ -86,8 +98,7 @@ export default createComponent({
 
       if (type.value === 'dialog') {
         component = QDialog
-      }
-      else {
+      } else {
         component = QMenu
         Object.assign(data, {
           target: props.target,

package/src/components/popup-proxy/QPopupProxy.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-anchor/use-anchor" ],
+  "mixins": ["composables/private.use-anchor/use-anchor"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/popup-proxy"
@@ -15,7 +15,7 @@
     },
 
     "breakpoint": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Breakpoint (in pixels) of window width/height (whichever is smaller) from where a Menu will get to be used instead of a Dialog",
       "default": "450",
       "category": "behavior"
@@ -75,7 +75,7 @@
         "type": {
           "type": "String",
           "desc": "Component type",
-          "values": [ "'dialog'", "'menu'" ]
+          "values": ["'dialog'", "'menu'"]
         },
         "ref": {
           "type": "Component",

package/src/components/popup-proxy/index.js

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

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -1,17 +1,28 @@
-import { h, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  getCurrentInstance
+} from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QSpinner from '../spinner/QSpinner.js'
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { getScrollTarget, getVerticalScrollPosition, scrollTargetProp } from '../../utils/scroll/scroll.js'
+import {
+  getScrollTarget,
+  getVerticalScrollPosition,
+  scrollTargetProp
+} from '../../utils/scroll/scroll.js'
 import { between } from '../../utils/format/format.js'
 import { prevent } from '../../utils/event/event.js'
 import { hSlot, hDir } from '../../utils/private.render/render.js'
 
-const
-  PULLER_HEIGHT = 40,
+const PULLER_HEIGHT = 40,
   OFFSET_TOP = 20
 
 export default createComponent({
@@ -27,9 +38,9 @@ export default createComponent({
     scrollTarget: scrollTargetProp
   },
 
-  emits: [ 'refresh' ],
+  emits: ['refresh'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
@@ -42,16 +53,19 @@ export default createComponent({
 
     const style = computed(() => ({
       opacity: pullRatio.value,
-      transform: `translateY(${ pullPosition.value }px) rotate(${ pullRatio.value * 360 }deg)`
+      transform: `translateY(${pullPosition.value}px) rotate(${pullRatio.value * 360}deg)`
     }))
 
-    const classes = computed(() =>
-      'q-pull-to-refresh__puller row flex-center'
-      + (animating.value === true ? ' q-pull-to-refresh__puller--animating' : '')
-      + (props.bgColor !== void 0 ? ` bg-${ props.bgColor }` : '')
+    const classes = computed(
+      () =>
+        'q-pull-to-refresh__puller row flex-center' +
+        (animating.value === true
+          ? ' q-pull-to-refresh__puller--animating'
+          : '') +
+        (props.bgColor !== void 0 ? ` bg-${props.bgColor}` : '')
     )
 
-    function pull (event) {
+    function pull(event) {
       if (event.isFinal === true) {
         if (pulling.value === true) {
           pulling.value = false
@@ -60,8 +74,7 @@ export default createComponent({
             state.value = 'refreshing'
             animateTo({ pos: OFFSET_TOP })
             trigger()
-          }
-          else if (state.value === 'pull') {
+          } else if (state.value === 'pull') {
             animateTo({ pos: -PULLER_HEIGHT, ratio: 0 })
           }
         }
@@ -74,7 +87,10 @@ export default createComponent({
       }
 
       if (event.isFirst === true) {
-        if (getVerticalScrollPosition(localScrollTarget) !== 0 || event.direction !== 'down') {
+        if (
+          getVerticalScrollPosition(localScrollTarget) !== 0 ||
+          event.direction !== 'down'
+        ) {
           if (pulling.value === true) {
             pulling.value = false
             state.value = 'pull'
@@ -115,19 +131,15 @@ export default createComponent({
         modifiers.mouse = true
       }
 
-      return [ [
-        TouchPan,
-        pull,
-        void 0,
-        modifiers
-      ] ]
+      return [[TouchPan, pull, void 0, modifiers]]
     })
 
-    const contentClass = computed(() =>
-      `q-pull-to-refresh__content${ pulling.value === true ? ' no-pointer-events' : '' }`
+    const contentClass = computed(
+      () =>
+        `q-pull-to-refresh__content${pulling.value === true ? ' no-pointer-events' : ''}`
     )
 
-    function trigger () {
+    function trigger() {
       emit('refresh', () => {
         animateTo({ pos: -PULLER_HEIGHT, ratio: 0 }, () => {
           state.value = 'pull'
@@ -135,9 +147,10 @@ export default createComponent({
       })
     }
 
-    let localScrollTarget, timer = null
+    let localScrollTarget,
+      timer = null
 
-    function animateTo ({ pos, ratio }, done) {
+    function animateTo({ pos, ratio }, done) {
       animating.value = true
       pullPosition.value = pos
 
@@ -145,7 +158,7 @@ export default createComponent({
         pullRatio.value = ratio
       }
 
-      timer !== null && clearTimeout(timer)
+      if (timer !== null) clearTimeout(timer)
       timer = setTimeout(() => {
         timer = null
         animating.value = false
@@ -153,7 +166,7 @@ export default createComponent({
       }, 300)
     }
 
-    function updateScrollTarget () {
+    function updateScrollTarget() {
       localScrollTarget = getScrollTarget(proxy.$el, props.scrollTarget)
     }
 
@@ -162,7 +175,7 @@ export default createComponent({
     onMounted(updateScrollTarget)
 
     onBeforeUnmount(() => {
-      timer !== null && clearTimeout(timer)
+      if (timer !== null) clearTimeout(timer)
     })
 
     // expose public methods
@@ -172,26 +185,35 @@ export default createComponent({
       const child = [
         h('div', { class: contentClass.value }, hSlot(slots.default)),
 
-        h('div', {
-          class: 'q-pull-to-refresh__puller-container fixed row flex-center no-pointer-events z-top',
-          style: positionCSS.value
-        }, [
-          h('div', {
-            class: classes.value,
-            style: style.value
-          }, [
-            state.value !== 'refreshing'
-              ? h(QIcon, {
-                name: props.icon || $q.iconSet.pullToRefresh.icon,
-                color: props.color,
-                size: '32px'
-              })
-              : h(QSpinner, {
-                size: '24px',
-                color: props.color
-              })
-          ])
-        ])
+        h(
+          'div',
+          {
+            class:
+              'q-pull-to-refresh__puller-container fixed row flex-center no-pointer-events z-top',
+            style: positionCSS.value
+          },
+          [
+            h(
+              'div',
+              {
+                class: classes.value,
+                style: style.value
+              },
+              [
+                state.value !== 'refreshing'
+                  ? h(QIcon, {
+                      name: props.icon || $q.iconSet.pullToRefresh.icon,
+                      color: props.color,
+                      size: '32px'
+                    })
+                  : h(QSpinner, {
+                      size: '24px',
+                      color: props.color
+                    })
+              ]
+            )
+          ]
+        )
       ]
 
       return hDir(

package/src/components/pull-to-refresh/index.js

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