quasar 2.18.6 → 2.19.0

package/src/components/layout/QLayout.js

@@ -1,4 +1,13 @@
-import { h, ref, reactive, computed, watch, provide, onUnmounted, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  reactive,
+  computed,
+  watch,
+  provide,
+  onUnmounted,
+  getCurrentInstance
+} from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 
@@ -26,8 +35,10 @@ export default createComponent({
     onResize: Function
   },
 
-  setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots, emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const rootRef = ref(null)
 
@@ -38,37 +49,42 @@ export default createComponent({
 
     // container only prop
     const containerHeight = ref(0)
-    const scrollbarWidth = ref(isRuntimeSsrPreHydration.value === true ? 0 : getScrollbarWidth())
+    const scrollbarWidth = ref(
+      isRuntimeSsrPreHydration.value === true ? 0 : getScrollbarWidth()
+    )
 
-    const classes = computed(() =>
-      'q-layout q-layout--'
-      + (props.container === true ? 'containerized' : 'standard')
+    const classes = computed(
+      () =>
+        'q-layout q-layout--' +
+        (props.container === true ? 'containerized' : 'standard')
     )
 
-    const style = computed(() => (
-      props.container === false
-        ? { minHeight: $q.screen.height + 'px' }
-        : null
-    ))
+    const style = computed(() =>
+      props.container === false ? { minHeight: $q.screen.height + 'px' } : null
+    )
 
     // used by container only
-    const targetStyle = computed(() => (
+    const targetStyle = computed(() =>
       scrollbarWidth.value !== 0
-        ? { [ $q.lang.rtl === true ? 'left' : 'right' ]: `${ scrollbarWidth.value }px` }
+        ? {
+            [$q.lang.rtl === true ? 'left' : 'right']:
+              `${scrollbarWidth.value}px`
+          }
         : null
-    ))
+    )
 
-    const targetChildStyle = computed(() => (
+    const targetChildStyle = computed(() =>
       scrollbarWidth.value !== 0
         ? {
-            [ $q.lang.rtl === true ? 'right' : 'left' ]: 0,
-            [ $q.lang.rtl === true ? 'left' : 'right' ]: `-${ scrollbarWidth.value }px`,
-            width: `calc(100% + ${ scrollbarWidth.value }px)`
+            [$q.lang.rtl === true ? 'right' : 'left']: 0,
+            [$q.lang.rtl === true ? 'left' : 'right']:
+              `-${scrollbarWidth.value}px`,
+            width: `calc(100% + ${scrollbarWidth.value}px)`
           }
         : null
-    ))
+    )
 
-    function onPageScroll (data) {
+    function onPageScroll(data) {
       if (props.container === true || document.qScrollPrevented !== true) {
         const info = {
           position: data.position.top,
@@ -79,18 +95,18 @@ export default createComponent({
         }
 
         scroll.value = info
-        props.onScroll !== void 0 && emit('scroll', info)
+        if (props.onScroll !== void 0) emit('scroll', info)
       }
     }
 
-    function onPageResize (data) {
+    function onPageResize(data) {
       const { height: newHeight, width: newWidth } = data
       let resized = false
 
       if (height.value !== newHeight) {
         resized = true
         height.value = newHeight
-        props.onScrollHeight !== void 0 && emit('scrollHeight', newHeight)
+        if (props.onScrollHeight !== void 0) emit('scrollHeight', newHeight)
         updateScrollbarWidth()
       }
       if (width.value !== newWidth) {
@@ -103,21 +119,20 @@ export default createComponent({
       }
     }
 
-    function onContainerResize ({ height }) {
-      if (containerHeight.value !== height) {
-        containerHeight.value = height
+    function onContainerResize({ height: newHeight }) {
+      if (containerHeight.value !== newHeight) {
+        containerHeight.value = newHeight
         updateScrollbarWidth()
       }
     }
 
-    function updateScrollbarWidth () {
+    function updateScrollbarWidth() {
       if (props.container === true) {
-        const width = height.value > containerHeight.value
-          ? getScrollbarWidth()
-          : 0
+        const newWidth =
+          height.value > containerHeight.value ? getScrollbarWidth() : 0
 
-        if (scrollbarWidth.value !== width) {
-          scrollbarWidth.value = width
+        if (scrollbarWidth.value !== newWidth) {
+          scrollbarWidth.value = newWidth
         }
       }
     }
@@ -139,9 +154,9 @@ export default createComponent({
       rows: computed(() => {
         const rows = props.view.toLowerCase().split(' ')
         return {
-          top: rows[ 0 ].split(''),
-          middle: rows[ 1 ].split(''),
-          bottom: rows[ 2 ].split('')
+          top: rows[0].split(''),
+          middle: rows[1].split(''),
+          bottom: rows[2].split('')
         }
       }),
 
@@ -152,11 +167,10 @@ export default createComponent({
 
       scroll,
 
-      animate () {
+      animate() {
         if (animateTimer !== null) {
           clearTimeout(animateTimer)
-        }
-        else {
+        } else {
           document.body.classList.add('q-body--layout-animate')
         }
 
@@ -166,8 +180,8 @@ export default createComponent({
         }, 155)
       },
 
-      update (part, prop, val) {
-        $layout[ part ][ prop ] = val
+      update(part, prop, val) {
+        $layout[part][prop] = val
       }
     }
 
@@ -179,32 +193,31 @@ export default createComponent({
       let timer = null
       const el = document.body
 
-      function restoreScrollbar () {
+      function restoreScrollbar() {
         timer = null
         el.classList.remove('hide-scrollbar')
       }
 
-      function hideScrollbar () {
+      function hideScrollbar() {
         if (timer === null) {
           // if it has no scrollbar then there's nothing to do
           if (el.scrollHeight > $q.screen.height) return
 
           el.classList.add('hide-scrollbar')
-        }
-        else {
+        } else {
           clearTimeout(timer)
         }
 
         timer = setTimeout(restoreScrollbar, 300)
       }
 
-      function updateScrollEvent (action) {
+      function updateScrollEvent(action) {
         if (timer !== null && action === 'remove') {
           clearTimeout(timer)
           restoreScrollbar()
         }
 
-        window[ `${ action }EventListener` ]('resize', hideScrollbar)
+        window[`${action}EventListener`]('resize', hideScrollbar)
       }
 
       watch(
@@ -212,7 +225,7 @@ export default createComponent({
         updateScrollEvent
       )
 
-      props.container !== true && updateScrollEvent('add')
+      if (props.container !== true) updateScrollEvent('add')
 
       onUnmounted(() => {
         updateScrollEvent('remove')
@@ -225,29 +238,45 @@ export default createComponent({
         h(QResizeObserver, { onResize: onPageResize })
       ])
 
-      const layout = h('div', {
-        class: classes.value,
-        style: style.value,
-        ref: props.container === true ? void 0 : rootRef,
-        tabindex: -1
-      }, content)
+      const layout = h(
+        'div',
+        {
+          class: classes.value,
+          style: style.value,
+          ref: props.container === true ? void 0 : rootRef,
+          tabindex: -1
+        },
+        content
+      )
 
       if (props.container === true) {
-        return h('div', {
-          class: 'q-layout-container overflow-hidden',
-          ref: rootRef
-        }, [
-          h(QResizeObserver, { onResize: onContainerResize }),
-          h('div', {
-            class: 'absolute-full',
-            style: targetStyle.value
-          }, [
-            h('div', {
-              class: 'scroll',
-              style: targetChildStyle.value
-            }, [ layout ])
-          ])
-        ])
+        return h(
+          'div',
+          {
+            class: 'q-layout-container overflow-hidden',
+            ref: rootRef
+          },
+          [
+            h(QResizeObserver, { onResize: onContainerResize }),
+            h(
+              'div',
+              {
+                class: 'absolute-full',
+                style: targetStyle.value
+              },
+              [
+                h(
+                  'div',
+                  {
+                    class: 'scroll',
+                    style: targetChildStyle.value
+                  },
+                  [layout]
+                )
+              ]
+            )
+          ]
+        )
       }
 
       return layout

package/src/components/layout/QLayout.json

@@ -8,7 +8,7 @@
       "type": "String",
       "desc": "Defines how your layout components (header/footer/drawer) should be placed on screen; See docs examples",
       "default": "'hhh lpr fff'",
-      "examples": [ "'hHh lpR fFf'" ],
+      "examples": ["'hHh lpR fFf'"],
       "category": "content"
     },
 
@@ -65,7 +65,7 @@
               "type": "String",
               "required": true,
               "desc": "Direction of scroll",
-              "values": [ "'up'", "'down'" ]
+              "values": ["'up'", "'down'"]
             },
             "directionChanged": {
               "type": "Boolean",

package/src/components/layout/index.js

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

package/src/components/linear-progress/QLinearProgress.js

@@ -1,7 +1,11 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import useSize, {
+  useSizeProps
+} from '../../composables/private.use-size/use-size.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
@@ -14,11 +18,12 @@ const defaultSizes = {
   xl: 14
 }
 
-function width (val, reverse, $q) {
+function width(val, reverse, $q) {
   return {
-    transform: reverse === true
-      ? `translateX(${ $q.lang.rtl === true ? '-' : '' }100%) scale3d(${ -val },1,1)`
-      : `scale3d(${ val },1,1)`
+    transform:
+      reverse === true
+        ? `translateX(${$q.lang.rtl === true ? '-' : ''}100%) scale3d(${-val},1,1)`
+        : `scale3d(${val},1,1)`
   }
 }
 
@@ -45,53 +50,75 @@ export default createComponent({
     rounded: Boolean,
 
     animationSpeed: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 2100
     },
 
     instantFeedback: Boolean
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const { proxy } = getCurrentInstance()
     const isDark = useDark(props, proxy.$q)
     const sizeStyle = useSize(props, defaultSizes)
 
-    const motion = computed(() => props.indeterminate === true || props.query === true)
+    const motion = computed(
+      () => props.indeterminate === true || props.query === true
+    )
     const widthReverse = computed(() => props.reverse !== props.query)
     const style = computed(() => ({
       ...(sizeStyle.value !== null ? sizeStyle.value : {}),
-      '--q-linear-progress-speed': `${ props.animationSpeed }ms`
+      '--q-linear-progress-speed': `${props.animationSpeed}ms`
     }))
 
-    const classes = computed(() =>
-      'q-linear-progress'
-      + (props.color !== void 0 ? ` text-${ props.color }` : '')
-      + (props.reverse === true || props.query === true ? ' q-linear-progress--reverse' : '')
-      + (props.rounded === true ? ' rounded-borders' : '')
+    const classes = computed(
+      () =>
+        'q-linear-progress' +
+        (props.color !== void 0 ? ` text-${props.color}` : '') +
+        (props.reverse === true || props.query === true
+          ? ' q-linear-progress--reverse'
+          : '') +
+        (props.rounded === true ? ' rounded-borders' : '')
     )
 
-    const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q))
-    const transitionSuffix = computed(() => `with${ props.instantFeedback === true ? 'out' : '' }-transition`)
+    const trackStyle = computed(() =>
+      width(
+        props.buffer !== void 0 ? props.buffer : 1,
+        widthReverse.value,
+        proxy.$q
+      )
+    )
+    const transitionSuffix = computed(
+      () => `with${props.instantFeedback === true ? 'out' : ''}-transition`
+    )
 
-    const trackClass = computed(() =>
-      'q-linear-progress__track absolute-full'
-      + ` q-linear-progress__track--${ transitionSuffix.value }`
-      + ` q-linear-progress__track--${ isDark.value === true ? 'dark' : 'light' }`
-      + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
+    const trackClass = computed(
+      () =>
+        'q-linear-progress__track absolute-full' +
+        ` q-linear-progress__track--${transitionSuffix.value}` +
+        ` q-linear-progress__track--${isDark.value === true ? 'dark' : 'light'}` +
+        (props.trackColor !== void 0 ? ` bg-${props.trackColor}` : '')
     )
 
-    const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q))
-    const modelClass = computed(() =>
-      'q-linear-progress__model absolute-full'
-      + ` q-linear-progress__model--${ transitionSuffix.value }`
-      + ` q-linear-progress__model--${ motion.value === true ? 'in' : '' }determinate`
+    const modelStyle = computed(() =>
+      width(
+        motion.value === true ? 1 : props.value,
+        widthReverse.value,
+        proxy.$q
+      )
+    )
+    const modelClass = computed(
+      () =>
+        'q-linear-progress__model absolute-full' +
+        ` q-linear-progress__model--${transitionSuffix.value}` +
+        ` q-linear-progress__model--${motion.value === true ? 'in' : ''}determinate`
     )
 
-    const stripeStyle = computed(() => ({ width: `${ props.value * 100 }%` }))
-    const stripeClass = computed(() =>
-      `q-linear-progress__stripe absolute-${ props.reverse === true ? 'right' : 'left' }`
-      + ` q-linear-progress__stripe--${ transitionSuffix.value }`
+    const stripeStyle = computed(() => ({ width: `${props.value * 100}%` }))
+    const stripeClass = computed(
+      () =>
+        `q-linear-progress__stripe absolute-${props.reverse === true ? 'right' : 'left'}` +
+        ` q-linear-progress__stripe--${transitionSuffix.value}`
     )
 
     return () => {
@@ -107,23 +134,27 @@ export default createComponent({
         })
       ]
 
-      props.stripe === true && motion.value === false && child.push(
-        h('div', {
-          class: stripeClass.value,
-          style: stripeStyle.value
-        })
+      if (props.stripe === true && motion.value === false) {
+        child.push(
+          h('div', {
+            class: stripeClass.value,
+            style: stripeStyle.value
+          })
+        )
+      }
+
+      return h(
+        'div',
+        {
+          class: classes.value,
+          style: style.value,
+          role: 'progressbar',
+          'aria-valuemin': 0,
+          'aria-valuemax': 1,
+          'aria-valuenow': props.indeterminate === true ? void 0 : props.value
+        },
+        hMergeSlot(slots.default, child)
       )
-
-      return h('div', {
-        class: classes.value,
-        style: style.value,
-        role: 'progressbar',
-        'aria-valuemin': 0,
-        'aria-valuemax': 1,
-        'aria-valuenow': props.indeterminate === true
-          ? void 0
-          : props.value
-      }, hMergeSlot(slots.default, child))
     }
   }
 })

package/src/components/linear-progress/QLinearProgress.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-size/use-size" ],
+  "mixins": ["composables/private.use-size/use-size"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/linear-progress"
@@ -32,7 +32,7 @@
       "extends": "dark"
     },
 
-    "reverse":  {
+    "reverse": {
       "type": "Boolean",
       "desc": "Reverse direction of progress",
       "category": "behavior"
@@ -40,7 +40,7 @@
 
     "stripe": {
       "type": "Boolean",
-      "desc":  "Draw stripes; For determinate state only (for performance reasons)",
+      "desc": "Draw stripes; For determinate state only (for performance reasons)",
       "category": "content"
     },
 

package/src/components/linear-progress/index.js

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

package/src/components/markup-table/QMarkupTable.js

@@ -1,11 +1,13 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 
-const separatorValues = [ 'horizontal', 'vertical', 'cell', 'none' ]
+const separatorValues = ['horizontal', 'vertical', 'cell', 'none']
 
 export default createComponent({
   name: 'QMarkupTable',
@@ -26,25 +28,31 @@ export default createComponent({
     }
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
-    const classes = computed(() =>
-      'q-markup-table q-table__container q-table__card'
-      + ` q-table--${ props.separator }-separator`
-      + (isDark.value === true ? ' q-table--dark q-table__card--dark q-dark' : '')
-      + (props.dense === true ? ' q-table--dense' : '')
-      + (props.flat === true ? ' q-table--flat' : '')
-      + (props.bordered === true ? ' q-table--bordered' : '')
-      + (props.square === true ? ' q-table--square' : '')
-      + (props.wrapCells === false ? ' q-table--no-wrap' : '')
+    const classes = computed(
+      () =>
+        'q-markup-table q-table__container q-table__card' +
+        ` q-table--${props.separator}-separator` +
+        (isDark.value === true
+          ? ' q-table--dark q-table__card--dark q-dark'
+          : '') +
+        (props.dense === true ? ' q-table--dense' : '') +
+        (props.flat === true ? ' q-table--flat' : '') +
+        (props.bordered === true ? ' q-table--bordered' : '') +
+        (props.square === true ? ' q-table--square' : '') +
+        (props.wrapCells === false ? ' q-table--no-wrap' : '')
     )
 
-    return () => h('div', {
-      class: classes.value
-    }, [
-      h('table', { class: 'q-table' }, hSlot(slots.default))
-    ])
+    return () =>
+      h(
+        'div',
+        {
+          class: classes.value
+        },
+        [h('table', { class: 'q-table' }, hSlot(slots.default))]
+      )
   }
 })

package/src/components/markup-table/QMarkupTable.json

@@ -28,8 +28,8 @@
       "type": "String",
       "desc": "Use a separator/border between rows, columns or all cells",
       "default": "'horizontal'",
-      "values": [ "'horizontal'", "'vertical'", "'cell'", "'none'" ],
-      "examples": [ "'cell'" ],
+      "values": ["'horizontal'", "'vertical'", "'cell'", "'none'"],
+      "examples": ["'cell'"],
       "category": "content"
     },
 

package/src/components/markup-table/index.js

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