quasar 2.18.7 → 2.19.1

package/src/components/carousel/QCarousel.js

@@ -1,17 +1,32 @@
-import { h, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import {
+  h,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  getCurrentInstance
+} from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private.use-panel/use-panel.js'
-import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private.use-fullscreen/use-fullscreen.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import usePanel, {
+  usePanelProps,
+  usePanelEmits
+} from '../../composables/private.use-panel/use-panel.js'
+import useFullscreen, {
+  useFullscreenProps,
+  useFullscreenEmits
+} from '../../composables/private.use-fullscreen/use-fullscreen.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { isNumber } from '../../utils/is/is.js'
 import { hMergeSlot, hDir } from '../../utils/private.render/render.js'
 
-const navigationPositionOptions = [ 'top', 'right', 'bottom', 'left' ]
-const controlTypeOptions = [ 'regular', 'flat', 'outline', 'push', 'unelevated' ]
+const navigationPositionOptions = ['top', 'right', 'bottom', 'left']
+const controlTypeOptions = ['regular', 'flat', 'outline', 'push', 'unelevated']
 
 export default createComponent({
   name: 'QCarousel',
@@ -21,11 +36,13 @@ export default createComponent({
     ...usePanelProps,
     ...useFullscreenProps,
 
-    transitionPrev: { // usePanelParentProps override
+    transitionPrev: {
+      // usePanelParentProps override
       type: String,
       default: 'fade'
     },
-    transitionNext: { // usePanelParentProps override
+    transitionNext: {
+      // usePanelParentProps override
       type: String,
       default: 'fade'
     },
@@ -41,7 +58,7 @@ export default createComponent({
       default: 'flat'
     },
 
-    autoplay: [ Number, Boolean ],
+    autoplay: [Number, Boolean],
 
     arrows: Boolean,
     prevIcon: String,
@@ -58,51 +75,66 @@ export default createComponent({
     thumbnails: Boolean
   },
 
-  emits: [
-    ...useFullscreenEmits,
-    ...usePanelEmits
-  ],
+  emits: [...useFullscreenEmits, ...usePanelEmits],
 
-  setup (props, { slots }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const isDark = useDark(props, $q)
 
-    let timer = null, panelsLen
+    let timer = null,
+      panelsLen
 
     const {
-      updatePanelsList, getPanelContent,
-      panelDirectives, goToPanel,
-      previousPanel, nextPanel, getEnabledPanels,
+      updatePanelsList,
+      getPanelContent,
+      panelDirectives,
+      goToPanel,
+      previousPanel,
+      nextPanel,
+      getEnabledPanels,
       panelIndex
     } = usePanel()
 
     const { inFullscreen } = useFullscreen()
 
-    const style = computed(() => (
+    const style = computed(() =>
       inFullscreen.value !== true && props.height !== void 0
         ? { height: props.height }
         : {}
-    ))
+    )
 
-    const direction = computed(() => (props.vertical === true ? 'vertical' : 'horizontal'))
+    const direction = computed(() =>
+      props.vertical === true ? 'vertical' : 'horizontal'
+    )
 
-    const navigationPosition = computed(() => props.navigationPosition
-      || (props.vertical === true ? 'right' : 'bottom')
+    const navigationPosition = computed(
+      () =>
+        props.navigationPosition ||
+        (props.vertical === true ? 'right' : 'bottom')
     )
 
-    const classes = computed(() =>
-      `q-carousel q-panel-parent q-carousel--with${ props.padding === true ? '' : 'out' }-padding`
-      + (inFullscreen.value === true ? ' fullscreen' : '')
-      + (isDark.value === true ? ' q-carousel--dark q-dark' : '')
-      + (props.arrows === true ? ` q-carousel--arrows-${ direction.value }` : '')
-      + (props.navigation === true ? ` q-carousel--navigation-${ navigationPosition.value }` : '')
+    const classes = computed(
+      () =>
+        `q-carousel q-panel-parent q-carousel--with${props.padding === true ? '' : 'out'}-padding` +
+        (inFullscreen.value === true ? ' fullscreen' : '') +
+        (isDark.value === true ? ' q-carousel--dark q-dark' : '') +
+        (props.arrows === true
+          ? ` q-carousel--arrows-${direction.value}`
+          : '') +
+        (props.navigation === true
+          ? ` q-carousel--navigation-${navigationPosition.value}`
+          : '')
     )
 
     const arrowIcons = computed(() => {
       const ico = [
-        props.prevIcon || $q.iconSet.carousel[ props.vertical === true ? 'up' : 'left' ],
-        props.nextIcon || $q.iconSet.carousel[ props.vertical === true ? 'down' : 'right' ]
+        props.prevIcon ||
+          $q.iconSet.carousel[props.vertical === true ? 'up' : 'left'],
+        props.nextIcon ||
+          $q.iconSet.carousel[props.vertical === true ? 'down' : 'right']
       ]
 
       return props.vertical === false && $q.lang.rtl === true
@@ -110,83 +142,101 @@ export default createComponent({
         : ico
     })
 
-    const navIcon = computed(() => props.navigationIcon || $q.iconSet.carousel.navigationIcon)
-    const navActiveIcon = computed(() => props.navigationActiveIcon || navIcon.value)
+    const navIcon = computed(
+      () => props.navigationIcon || $q.iconSet.carousel.navigationIcon
+    )
+    const navActiveIcon = computed(
+      () => props.navigationActiveIcon || navIcon.value
+    )
 
     const controlProps = computed(() => ({
       color: props.controlColor,
       textColor: props.controlTextColor,
       round: true,
-      [ props.controlType ]: true,
+      [props.controlType]: true,
       dense: true
     }))
 
-    watch(() => props.modelValue, () => {
-      if (props.autoplay) {
-        startTimer()
+    watch(
+      () => props.modelValue,
+      () => {
+        if (props.autoplay) {
+          startTimer()
+        }
       }
-    })
+    )
 
-    watch(() => props.autoplay, val => {
-      if (val) {
-        startTimer()
-      }
-      else if (timer !== null) {
-        clearTimeout(timer)
-        timer = null
+    watch(
+      () => props.autoplay,
+      val => {
+        if (val) {
+          startTimer()
+        } else if (timer !== null) {
+          clearTimeout(timer)
+          timer = null
+        }
       }
-    })
+    )
 
-    function startTimer () {
-      const duration = isNumber(props.autoplay) === true
-        ? Math.abs(props.autoplay)
-        : 5000
+    function startTimer() {
+      const duration =
+        isNumber(props.autoplay) === true ? Math.abs(props.autoplay) : 5000
 
-      timer !== null && clearTimeout(timer)
+      if (timer !== null) clearTimeout(timer)
       timer = setTimeout(() => {
         timer = null
 
         if (duration >= 0) {
           nextPanel()
-        }
-        else {
+        } else {
           previousPanel()
         }
       }, duration)
     }
 
     onMounted(() => {
-      props.autoplay && startTimer()
+      if (props.autoplay) startTimer()
     })
 
     onBeforeUnmount(() => {
-      timer !== null && clearTimeout(timer)
+      if (timer !== null) clearTimeout(timer)
     })
 
-    function getNavigationContainer (type, mapping) {
-      return h('div', {
-        class: 'q-carousel__control q-carousel__navigation no-wrap absolute flex'
-          + ` q-carousel__navigation--${ type } q-carousel__navigation--${ navigationPosition.value }`
-          + (props.controlColor !== void 0 ? ` text-${ props.controlColor }` : '')
-      }, [
-        h('div', {
-          class: 'q-carousel__navigation-inner flex flex-center no-wrap'
-        }, getEnabledPanels().map(mapping))
-      ])
+    function getNavigationContainer(type, mapping) {
+      return h(
+        'div',
+        {
+          class:
+            'q-carousel__control q-carousel__navigation no-wrap absolute flex' +
+            ` q-carousel__navigation--${type} q-carousel__navigation--${navigationPosition.value}` +
+            (props.controlColor !== void 0 ? ` text-${props.controlColor}` : '')
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'q-carousel__navigation-inner flex flex-center no-wrap'
+            },
+            getEnabledPanels().map(mapping)
+          )
+        ]
+      )
     }
 
-    function getContent () {
+    function getContent() {
       const node = []
 
       if (props.navigation === true) {
-        const fn = slots[ 'navigation-icon' ] !== void 0
-          ? slots[ 'navigation-icon' ]
-          : opts => h(QBtn, {
-            key: 'nav' + opts.name,
-            class: `q-carousel__navigation-icon q-carousel__navigation-icon--${ opts.active === true ? '' : 'in' }active`,
-            ...opts.btnProps,
-            onClick: opts.onClick
-          })
+        const fn =
+          slots['navigation-icon'] !== void 0
+            ? slots['navigation-icon']
+            : opts =>
+                h(QBtn, {
+                  key: 'nav' + opts.name,
+                  class: `q-carousel__navigation-icon q-carousel__navigation-icon--${opts.active === true ? '' : 'in'}active`,
+                  ...opts.btnProps,
+                  onClick: opts.onClick
+                })
 
         const maxIndex = panelsLen - 1
         node.push(
@@ -204,57 +254,72 @@ export default createComponent({
                 size: 'sm',
                 ...controlProps.value
               },
-              onClick: () => { goToPanel(name) }
+              onClick: () => {
+                goToPanel(name)
+              }
             })
           })
         )
-      }
-      else if (props.thumbnails === true) {
-        const color = props.controlColor !== void 0
-          ? ` text-${ props.controlColor }`
-          : ''
-
-        node.push(getNavigationContainer('thumbnails', panel => {
-          const slide = panel.props
-
-          return h('img', {
-            key: 'tmb#' + slide.name,
-            class: `q-carousel__thumbnail q-carousel__thumbnail--${ slide.name === props.modelValue ? '' : 'in' }active` + color,
-            src: slide.imgSrc || slide[ 'img-src' ],
-            onClick: () => { goToPanel(slide.name) }
+      } else if (props.thumbnails === true) {
+        const color =
+          props.controlColor !== void 0 ? ` text-${props.controlColor}` : ''
+
+        node.push(
+          getNavigationContainer('thumbnails', panel => {
+            const slide = panel.props
+
+            return h('img', {
+              key: 'tmb#' + slide.name,
+              class:
+                `q-carousel__thumbnail q-carousel__thumbnail--${slide.name === props.modelValue ? '' : 'in'}active` +
+                color,
+              src: slide.imgSrc || slide['img-src'],
+              onClick: () => {
+                goToPanel(slide.name)
+              }
+            })
           })
-        }))
+        )
       }
 
       if (props.arrows === true && panelIndex.value >= 0) {
         if (props.infinite === true || panelIndex.value > 0) {
           node.push(
-            h('div', {
-              key: 'prev',
-              class: `q-carousel__control q-carousel__arrow q-carousel__prev-arrow q-carousel__prev-arrow--${ direction.value } absolute flex flex-center`
-            }, [
-              h(QBtn, {
-                icon: arrowIcons.value[ 0 ],
-                ...controlProps.value,
-                onClick: previousPanel
-              })
-            ])
+            h(
+              'div',
+              {
+                key: 'prev',
+                class: `q-carousel__control q-carousel__arrow q-carousel__prev-arrow q-carousel__prev-arrow--${direction.value} absolute flex flex-center`
+              },
+              [
+                h(QBtn, {
+                  icon: arrowIcons.value[0],
+                  ...controlProps.value,
+                  onClick: previousPanel
+                })
+              ]
+            )
           )
         }
 
         if (props.infinite === true || panelIndex.value < panelsLen - 1) {
           node.push(
-            h('div', {
-              key: 'next',
-              class: 'q-carousel__control q-carousel__arrow q-carousel__next-arrow'
-                + ` q-carousel__next-arrow--${ direction.value } absolute flex flex-center`
-            }, [
-              h(QBtn, {
-                icon: arrowIcons.value[ 1 ],
-                ...controlProps.value,
-                onClick: nextPanel
-              })
-            ])
+            h(
+              'div',
+              {
+                key: 'next',
+                class:
+                  'q-carousel__control q-carousel__arrow q-carousel__next-arrow' +
+                  ` q-carousel__next-arrow--${direction.value} absolute flex flex-center`
+              },
+              [
+                h(QBtn, {
+                  icon: arrowIcons.value[1],
+                  ...controlProps.value,
+                  onClick: nextPanel
+                })
+              ]
+            )
           )
         }
       }
@@ -265,19 +330,23 @@ export default createComponent({
     return () => {
       panelsLen = updatePanelsList(slots)
 
-      return h('div', {
-        class: classes.value,
-        style: style.value
-      }, [
-        hDir(
-          'div',
-          { class: 'q-carousel__slides-container' },
-          getPanelContent(),
-          'sl-cont',
-          props.swipeable,
-          () => panelDirectives.value
-        )
-      ].concat(getContent()))
+      return h(
+        'div',
+        {
+          class: classes.value,
+          style: style.value
+        },
+        [
+          hDir(
+            'div',
+            { class: 'q-carousel__slides-container' },
+            getPanelContent(),
+            'sl-cont',
+            props.swipeable,
+            () => panelDirectives.value
+          )
+        ].concat(getContent())
+      )
     }
   }
 })

package/src/components/carousel/QCarousel.json

@@ -1,5 +1,8 @@
 {
-  "mixins": [ "composables/private.use-panel/use-panel", "composables/private.use-fullscreen/use-fullscreen" ],
+  "mixins": [
+    "composables/private.use-panel/use-panel",
+    "composables/private.use-fullscreen/use-fullscreen"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/carousel"
@@ -34,19 +37,15 @@
     "control-type": {
       "type": "String",
       "desc": "Type of button to use for controls (arrows, navigation)",
-      "values": [ "'regular'", "'flat'", "'outline'", "'push'", "'unelevated'" ],
+      "values": ["'regular'", "'flat'", "'outline'", "'push'", "'unelevated'"],
       "default": "'flat'",
       "category": "style"
     },
 
     "autoplay": {
-      "type": [ "Number", "Boolean" ],
+      "type": ["Number", "Boolean"],
       "desc": "Jump to next slide (if 'true' or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals",
-      "examples": [
-        "true",
-        "false",
-        "2500"
-      ],
+      "examples": ["true", "false", "2500"],
       "category": "behavior"
     },
 
@@ -75,7 +74,7 @@
       "desc": "Side to stick navigation to",
       "default": "# 'bottom'/'right'",
       "__runtimeDefault": true,
-      "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
+      "values": ["'top'", "'right'", "'bottom'", "'left'"],
       "category": "content"
     },
 
@@ -96,12 +95,12 @@
 
     "transition-prev": {
       "default": "'fade'",
-      "__delete": [ "__runtimeDefault" ]
+      "__delete": ["__runtimeDefault"]
     },
 
     "transition-next": {
       "default": "'fade'",
-      "__delete": [ "__runtimeDefault" ]
+      "__delete": ["__runtimeDefault"]
     }
   },
 

package/src/components/carousel/QCarouselControl.js

@@ -10,28 +10,41 @@ export default createComponent({
     position: {
       type: String,
       default: 'bottom-right',
-      validator: v => [
-        'top-right', 'top-left',
-        'bottom-right', 'bottom-left',
-        'top', 'right', 'bottom', 'left'
-      ].includes(v)
+      validator: v =>
+        [
+          'top-right',
+          'top-left',
+          'bottom-right',
+          'bottom-left',
+          'top',
+          'right',
+          'bottom',
+          'left'
+        ].includes(v)
     },
     offset: {
       type: Array,
-      default: () => [ 18, 18 ],
+      default: () => [18, 18],
       validator: v => v.length === 2
     }
   },
 
-  setup (props, { slots }) {
-    const classes = computed(() => `q-carousel__control absolute absolute-${ props.position }`)
+  setup(props, { slots }) {
+    const classes = computed(
+      () => `q-carousel__control absolute absolute-${props.position}`
+    )
     const style = computed(() => ({
-      margin: `${ props.offset[ 1 ] }px ${ props.offset[ 0 ] }px`
+      margin: `${props.offset[1]}px ${props.offset[0]}px`
     }))
 
-    return () => h('div', {
-      class: classes.value,
-      style: style.value
-    }, hSlot(slots.default))
+    return () =>
+      h(
+        'div',
+        {
+          class: classes.value,
+          style: style.value
+        },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/carousel/QCarouselControl.json

@@ -9,9 +9,14 @@
       "desc": "Side/corner to stick to",
       "default": "'bottom-right'",
       "values": [
-        "'top-right'", "'top-left'",
-        "'bottom-right'", "'bottom-left'",
-        "'top'", "'right'", "'bottom'", "'left'"
+        "'top-right'",
+        "'top-left'",
+        "'bottom-right'",
+        "'bottom-left'",
+        "'top'",
+        "'right'",
+        "'bottom'",
+        "'left'"
       ],
       "category": "position"
     },
@@ -19,8 +24,8 @@
     "offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the component horizontally and vertically (in pixels)",
-      "default": "[ 18, 18 ]",
-      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
+      "default": "[18, 18]",
+      "examples": ["[8, 8]", "[5, 10]"],
       "category": "position"
     }
   },

package/src/components/carousel/QCarouselSlide.js

@@ -13,16 +13,19 @@ export default createComponent({
     imgSrc: String
   },
 
-  setup (props, { slots }) {
-    const style = computed(() => (
-      props.imgSrc
-        ? { backgroundImage: `url("${ props.imgSrc }")` }
-        : {}
-    ))
+  setup(props, { slots }) {
+    const style = computed(() =>
+      props.imgSrc ? { backgroundImage: `url("${props.imgSrc}")` } : {}
+    )
 
-    return () => h('div', {
-      class: 'q-carousel__slide',
-      style: style.value
-    }, hSlot(slots.default))
+    return () =>
+      h(
+        'div',
+        {
+          class: 'q-carousel__slide',
+          style: style.value
+        },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/carousel/QCarouselSlide.json

@@ -3,7 +3,7 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/carousel"
   },
 
-  "mixins": [ "composables/private.use-panel/use-panel.child" ],
+  "mixins": ["composables/private.use-panel/use-panel.child"],
 
   "props": {
     "name": {

package/src/components/carousel/index.js

@@ -2,8 +2,4 @@ import QCarousel from './QCarousel.js'
 import QCarouselSlide from './QCarouselSlide.js'
 import QCarouselControl from './QCarouselControl.js'
 
-export {
-  QCarousel,
-  QCarouselSlide,
-  QCarouselControl
-}
+export { QCarousel, QCarouselSlide, QCarouselControl }