quasar 2.18.7 → 2.19.0

package/src/components/skeleton/index.js

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

package/src/components/slide-item/QSlideItem.js

@@ -1,18 +1,28 @@
-import { h, ref, computed, withDirectives, onBeforeUnmount, onBeforeUpdate, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  withDirectives,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  getCurrentInstance
+} from 'vue'
 
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 
 const slotsDef = [
-  [ 'left', 'center', 'start', 'width' ],
-  [ 'right', 'center', 'end', 'width' ],
-  [ 'top', 'start', 'center', 'height' ],
-  [ 'bottom', 'end', 'center', 'height' ]
+  ['left', 'center', 'start', 'width'],
+  ['right', 'center', 'end', 'width'],
+  ['top', 'start', 'center', 'height'],
+  ['bottom', 'end', 'center', 'height']
 ]
 
 export default createComponent({
@@ -29,9 +39,9 @@ export default createComponent({
     onSlide: Function
   },
 
-  emits: [ 'action', 'top', 'right', 'bottom', 'left' ],
+  emits: ['action', 'top', 'right', 'bottom', 'left'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
@@ -40,28 +50,32 @@ export default createComponent({
 
     const contentRef = ref(null)
 
-    let timer = null, pan = {}, dirRefs = {}, dirContentRefs = {}
+    let timer = null,
+      pan = {},
+      dirRefs = {},
+      dirContentRefs = {}
 
-    const langDir = computed(() => (
+    const langDir = computed(() =>
       $q.lang.rtl === true
         ? { left: 'right', right: 'left' }
         : { left: 'left', right: 'right' }
-    ))
+    )
 
-    const classes = computed(() =>
-      'q-slide-item q-item-type overflow-hidden'
-      + (isDark.value === true ? ' q-slide-item--dark q-dark' : '')
+    const classes = computed(
+      () =>
+        'q-slide-item q-item-type overflow-hidden' +
+        (isDark.value === true ? ' q-slide-item--dark q-dark' : '')
     )
 
-    function reset () {
+    function reset() {
       contentRef.value.style.transform = 'translate(0,0)'
     }
 
-    function emitSlide (side, ratio, isReset) {
-      props.onSlide !== void 0 && emit('slide', { side, ratio, isReset })
+    function emitSlide(side, ratio, isReset) {
+      if (props.onSlide !== void 0) emit('slide', { side, ratio, isReset })
     }
 
-    function onPan (evt) {
+    function onPan(evt) {
       const node = contentRef.value
 
       if (evt.isFirst) {
@@ -74,48 +88,50 @@ export default createComponent({
         node.classList.add('no-transition')
 
         slotsDef.forEach(slotName => {
-          if (slots[ slotName[ 0 ] ] !== void 0) {
-            const node = dirContentRefs[ slotName[ 0 ] ]
-            node.style.transform = 'scale(1)'
-            pan.size[ slotName[ 0 ] ] = node.getBoundingClientRect()[ slotName[ 3 ] ]
+          if (slots[slotName[0]] !== void 0) {
+            const localNode = dirContentRefs[slotName[0]]
+            localNode.style.transform = 'scale(1)'
+            pan.size[slotName[0]] =
+              localNode.getBoundingClientRect()[slotName[3]]
           }
         })
 
-        pan.axis = (evt.direction === 'up' || evt.direction === 'down')
-          ? 'Y'
-          : 'X'
-      }
-      else if (evt.isFinal) {
+        pan.axis =
+          evt.direction === 'up' || evt.direction === 'down' ? 'Y' : 'X'
+      } else if (evt.isFinal) {
         node.classList.remove('no-transition')
 
         if (pan.scale === 1) {
-          node.style.transform = `translate${ pan.axis }(${ pan.dir * 100 }%)`
+          node.style.transform = `translate${pan.axis}(${pan.dir * 100}%)`
 
-          timer !== null && clearTimeout(timer)
+          if (timer !== null) clearTimeout(timer)
           timer = setTimeout(() => {
             timer = null
             emit(pan.showing, { reset })
             emit('action', { side: pan.showing, reset })
           }, 230)
-        }
-        else {
+        } else {
           node.style.transform = 'translate(0,0)'
           emitSlide(pan.showing, 0, true)
         }
 
         return
-      }
-      else {
-        evt.direction = pan.axis === 'X'
-          ? evt.offset.x < 0 ? 'left' : 'right'
-          : evt.offset.y < 0 ? 'up' : 'down'
+      } else {
+        evt.direction =
+          pan.axis === 'X'
+            ? evt.offset.x < 0
+              ? 'left'
+              : 'right'
+            : evt.offset.y < 0
+              ? 'up'
+              : 'down'
       }
 
       if (
-        (slots.left === void 0 && evt.direction === langDir.value.right)
-        || (slots.right === void 0 && evt.direction === langDir.value.left)
-        || (slots.top === void 0 && evt.direction === 'down')
-        || (slots.bottom === void 0 && evt.direction === 'up')
+        (slots.left === void 0 && evt.direction === langDir.value.right) ||
+        (slots.right === void 0 && evt.direction === langDir.value.left) ||
+        (slots.top === void 0 && evt.direction === 'down') ||
+        (slots.bottom === void 0 && evt.direction === 'up')
       ) {
         node.style.transform = 'translate(0,0)'
         return
@@ -127,34 +143,28 @@ export default createComponent({
         dir = evt.direction === 'left' ? -1 : 1
         showing = dir === 1 ? langDir.value.left : langDir.value.right
         dist = evt.distance.x
-      }
-      else {
+      } else {
         dir = evt.direction === 'up' ? -2 : 2
         showing = dir === 2 ? 'top' : 'bottom'
         dist = evt.distance.y
       }
 
-      if (
-        pan.dir !== null
-        && Math.abs(dir) !== Math.abs(pan.dir)
-      ) return
+      if (pan.dir !== null && Math.abs(dir) !== Math.abs(pan.dir)) return
 
       if (pan.dir !== dir) {
-        [ 'left', 'right', 'top', 'bottom' ].forEach(d => {
-          if (dirRefs[ d ]) {
-            dirRefs[ d ].style.visibility = showing === d
-              ? 'visible'
-              : 'hidden'
+        ;['left', 'right', 'top', 'bottom'].forEach(d => {
+          if (dirRefs[d]) {
+            dirRefs[d].style.visibility = showing === d ? 'visible' : 'hidden'
           }
         })
         pan.showing = showing
         pan.dir = dir
       }
 
-      pan.scale = Math.max(0, Math.min(1, (dist - 40) / pan.size[ showing ]))
+      pan.scale = Math.max(0, Math.min(1, (dist - 40) / pan.size[showing]))
 
-      node.style.transform = `translate${ pan.axis }(${ dist * dir / Math.abs(dir) }px)`
-      dirContentRefs[ showing ].style.transform = `scale(${ pan.scale })`
+      node.style.transform = `translate${pan.axis}(${(dist * dir) / Math.abs(dir)}px)`
+      dirContentRefs[showing].style.transform = `scale(${pan.scale})`
 
       emitSlide(showing, pan.scale, false)
     }
@@ -165,69 +175,86 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      timer !== null && clearTimeout(timer)
+      if (timer !== null) clearTimeout(timer)
     })
 
     // expose public methods
     Object.assign(proxy, { reset })
 
     return () => {
-      const
-        content = [],
+      const content = [],
         slotsList = {
-          left: slots[ langDir.value.right ] !== void 0,
-          right: slots[ langDir.value.left ] !== void 0,
+          left: slots[langDir.value.right] !== void 0,
+          right: slots[langDir.value.left] !== void 0,
           up: slots.bottom !== void 0,
           down: slots.top !== void 0
         },
-        dirs = Object.keys(slotsList).filter(key => slotsList[ key ] === true)
+        dirs = Object.keys(slotsList).filter(key => slotsList[key] === true)
 
       slotsDef.forEach(slotName => {
-        const dir = slotName[ 0 ]
+        const dir = slotName[0]
 
-        if (slots[ dir ] !== void 0) {
+        if (slots[dir] !== void 0) {
           content.push(
-            h('div', {
-              key: dir,
-              ref: el => { dirRefs[ dir ] = el },
-              class: `q-slide-item__${ dir } absolute-full row no-wrap items-${ slotName[ 1 ] } justify-${ slotName[ 2 ] }`
-                + (props[ dir + 'Color' ] !== void 0 ? ` bg-${ props[ dir + 'Color' ] }` : '')
-            }, [
-              h('div', { ref: el => { dirContentRefs[ dir ] = el } }, slots[ dir ]())
-            ])
+            h(
+              'div',
+              {
+                key: dir,
+                ref: el => {
+                  dirRefs[dir] = el
+                },
+                class:
+                  `q-slide-item__${dir} absolute-full row no-wrap items-${slotName[1]} justify-${slotName[2]}` +
+                  (props[dir + 'Color'] !== void 0
+                    ? ` bg-${props[dir + 'Color']}`
+                    : '')
+              },
+              [
+                h(
+                  'div',
+                  {
+                    ref: el => {
+                      dirContentRefs[dir] = el
+                    }
+                  },
+                  slots[dir]()
+                )
+              ]
+            )
           )
         }
       })
 
-      const node = h('div', {
-        key: `${ dirs.length === 0 ? 'only-' : '' } content`,
-        ref: contentRef,
-        class: 'q-slide-item__content'
-      }, hSlot(slots.default))
+      const node = h(
+        'div',
+        {
+          key: `${dirs.length === 0 ? 'only-' : ''} content`,
+          ref: contentRef,
+          class: 'q-slide-item__content'
+        },
+        hSlot(slots.default)
+      )
 
       if (dirs.length === 0) {
         content.push(node)
-      }
-      else {
+      } else {
         content.push(
-          withDirectives(node, getCache('dir#' + dirs.join(''), () => {
-            const modifiers = {
-              prevent: true,
-              stop: true,
-              mouse: true
-            }
-
-            dirs.forEach(dir => {
-              modifiers[ dir ] = true
+          withDirectives(
+            node,
+            getCache('dir#' + dirs.join(''), () => {
+              const modifiers = {
+                prevent: true,
+                stop: true,
+                mouse: true
+              }
+
+              dirs.forEach(dir => {
+                modifiers[dir] = true
+              })
+
+              return [[TouchPan, onPan, void 0, modifiers]]
             })
-
-            return [ [
-              TouchPan,
-              onPan,
-              void 0,
-              modifiers
-            ] ]
-          }))
+          )
         )
       }
 

package/src/components/slide-item/QSlideItem.json

@@ -143,7 +143,7 @@
               "type": "String",
               "required": true,
               "desc": "Side to which sliding is taking effect",
-              "values": [ "'left'", "'right'", "'top'", "'bottom'" ]
+              "values": ["'left'", "'right'", "'top'", "'bottom'"]
             },
             "ratio": {
               "type": "Number",
@@ -171,7 +171,7 @@
               "type": "String",
               "required": true,
               "desc": "Side to which sliding has taken effect",
-              "values": [ "'left'", "'right'", "'top'", "'bottom'" ]
+              "values": ["'left'", "'right'", "'top'", "'bottom'"]
             },
             "reset": {
               "type": "Function",

package/src/components/slide-item/index.js

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

package/src/components/slide-transition/QSlideTransition.js

@@ -13,13 +13,18 @@ export default createComponent({
     }
   },
 
-  emits: [ 'show', 'hide' ],
-
-  setup (props, { slots, emit }) {
-    let animating = false, doneFn, element
-    let timer = null, timerFallback = null, animListener, lastEvent
-
-    function cleanup () {
+  emits: ['show', 'hide'],
+
+  setup(props, { slots, emit }) {
+    let animating = false,
+      doneFn,
+      element
+    let timer = null,
+      timerFallback = null,
+      animListener,
+      lastEvent
+
+    function cleanup() {
       doneFn?.()
       doneFn = null
       animating = false
@@ -38,26 +43,26 @@ export default createComponent({
       animListener = null
     }
 
-    function begin (el, height, done) {
+    function begin(el, height, done) {
       // here overflowY is 'hidden'
       if (height !== void 0) {
-        el.style.height = `${ height }px`
+        el.style.height = `${height}px`
       }
-      el.style.transition = `height ${ props.duration }ms cubic-bezier(.25, .8, .50, 1)`
+      el.style.transition = `height ${props.duration}ms cubic-bezier(.25, .8, .50, 1)`
 
       animating = true
       doneFn = done
     }
 
-    function end (el, event) {
+    function end(el, event) {
       el.style.overflowY = null
       el.style.height = null
       el.style.transition = null
       cleanup()
-      event !== lastEvent && emit(event)
+      if (event !== lastEvent) emit(event)
     }
 
-    function onEnter (el, done) {
+    function onEnter(el, done) {
       let pos = 0
       element = el
 
@@ -65,8 +70,7 @@ export default createComponent({
       if (animating === true) {
         cleanup()
         pos = el.offsetHeight === el.scrollHeight ? 0 : void 0
-      }
-      else {
+      } else {
         lastEvent = 'hide'
         el.style.overflowY = 'hidden'
       }
@@ -75,7 +79,7 @@ export default createComponent({
 
       timer = setTimeout(() => {
         timer = null
-        el.style.height = `${ el.scrollHeight }px`
+        el.style.height = `${el.scrollHeight}px`
         animListener = evt => {
           timerFallback = null
 
@@ -88,14 +92,13 @@ export default createComponent({
       }, 100)
     }
 
-    function onLeave (el, done) {
+    function onLeave(el, done) {
       let pos
       element = el
 
       if (animating === true) {
         cleanup()
-      }
-      else {
+      } else {
         lastEvent = 'show'
         // we need to set overflowY 'hidden' before calculating the height
         // or else we get small differences
@@ -121,14 +124,19 @@ export default createComponent({
     }
 
     onBeforeUnmount(() => {
-      animating === true && cleanup()
+      if (animating === true) cleanup()
     })
 
-    return () => h(Transition, {
-      css: false,
-      appear: props.appear,
-      onEnter,
-      onLeave
-    }, slots.default)
+    return () =>
+      h(
+        Transition,
+        {
+          css: false,
+          appear: props.appear,
+          onEnter,
+          onLeave
+        },
+        slots.default
+      )
   }
 })

package/src/components/slide-transition/index.js

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

package/src/components/slider/QSlider.js

@@ -26,16 +26,20 @@ export default createComponent({
       validator: v => typeof v === 'number' || v === null
     },
 
-    labelValue: [ String, Number ]
+    labelValue: [String, Number]
   },
 
   emits: useSliderEmits,
 
-  setup (props, { emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const { state, methods } = useSlider({
-      updateValue, updatePosition, getDragging,
+      updateValue,
+      updatePosition,
+      getDragging,
       formAttrs: useFormAttrs(props)
     })
 
@@ -43,29 +47,38 @@ export default createComponent({
     const curRatio = ref(0)
     const model = ref(0)
 
-    function normalizeModel () {
-      model.value = props.modelValue === null
-        ? state.innerMin.value
-        : between(props.modelValue, state.innerMin.value, state.innerMax.value)
+    function normalizeModel() {
+      model.value =
+        props.modelValue === null
+          ? state.innerMin.value
+          : between(
+              props.modelValue,
+              state.innerMin.value,
+              state.innerMax.value
+            )
     }
 
     watch(
-      () => `${ props.modelValue }|${ state.innerMin.value }|${ state.innerMax.value }`,
+      () =>
+        `${props.modelValue}|${state.innerMin.value}|${state.innerMax.value}`,
       normalizeModel
     )
 
     normalizeModel()
 
     const modelRatio = computed(() => methods.convertModelToRatio(model.value))
-    const ratio = computed(() => (state.active.value === true ? curRatio.value : modelRatio.value))
+    const ratio = computed(() =>
+      state.active.value === true ? curRatio.value : modelRatio.value
+    )
 
     const selectionBarStyle = computed(() => {
       const acc = {
-        [ state.positionProp.value ]: `${ 100 * state.innerMinRatio.value }%`,
-        [ state.sizeProp.value ]: `${ 100 * (ratio.value - state.innerMinRatio.value) }%`
+        [state.positionProp.value]: `${100 * state.innerMinRatio.value}%`,
+        [state.sizeProp.value]:
+          `${100 * (ratio.value - state.innerMinRatio.value)}%`
       }
       if (props.selectionImg !== void 0) {
-        acc.backgroundImage = `url(${ props.selectionImg }) !important`
+        acc.backgroundImage = `url(${props.selectionImg}) !important`
       }
       return acc
     })
@@ -74,11 +87,9 @@ export default createComponent({
       focusValue: true,
       getNodeData,
       ratio,
-      label: computed(() => (
-        props.labelValue !== void 0
-          ? props.labelValue
-          : model.value
-      )),
+      label: computed(() =>
+        props.labelValue !== void 0 ? props.labelValue : model.value
+      ),
       thumbColor: computed(() => props.thumbColor || props.color),
       labelColor: computed(() => props.labelColor),
       labelTextColor: computed(() => props.labelTextColor)
@@ -100,43 +111,45 @@ export default createComponent({
           }
     })
 
-    function updateValue (change) {
+    function updateValue(change) {
       if (model.value !== props.modelValue) {
         emit('update:modelValue', model.value)
       }
-      change === true && emit('change', model.value)
+
+      if (change === true) emit('change', model.value)
     }
 
-    function getDragging () {
+    function getDragging() {
       return rootRef.value.getBoundingClientRect()
     }
 
-    function updatePosition (event, dragging = state.dragging.value) {
-      const ratio = methods.getDraggingRatio(event, dragging)
+    function updatePosition(event, dragging = state.dragging.value) {
+      const localRatio = methods.getDraggingRatio(event, dragging)
 
-      model.value = methods.convertRatioToModel(ratio)
+      model.value = methods.convertRatioToModel(localRatio)
 
-      curRatio.value = props.snap !== true || props.step === 0
-        ? ratio
-        : methods.convertModelToRatio(model.value)
+      curRatio.value =
+        props.snap !== true || props.step === 0
+          ? localRatio
+          : methods.convertModelToRatio(model.value)
     }
 
-    function onFocus () {
+    function onFocus() {
       state.focus.value = true
     }
 
-    function onKeydown (evt) {
+    function onKeydown(evt) {
       if (keyCodes.includes(evt.keyCode) === false) return
 
       stopAndPrevent(evt)
 
-      const
-        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.keyStep.value,
-        offset = (
-          ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
-          * (state.isReversed.value === true ? -1 : 1)
-          * (props.vertical === true ? -1 : 1) * stepVal
-        )
+      const stepVal =
+          ([34, 33].includes(evt.keyCode) ? 10 : 1) * state.keyStep.value,
+        offset =
+          ([34, 37, 40].includes(evt.keyCode) ? -1 : 1) *
+          (state.isReversed.value === true ? -1 : 1) *
+          (props.vertical === true ? -1 : 1) *
+          stepVal
 
       model.value = between(
         state.roundValueFn.value(model.value + offset),
@@ -152,15 +165,23 @@ export default createComponent({
         selectionBarStyle,
         state.tabindex,
         trackContainerEvents,
-        node => { node.push(getThumb()) }
+        node => {
+          node.push(getThumb())
+        }
       )
 
-      return h('div', {
-        ref: rootRef,
-        class: state.classes.value + (props.modelValue === null ? ' q-slider--no-value' : ''),
-        ...state.attributes.value,
-        'aria-valuenow': props.modelValue
-      }, content)
+      return h(
+        'div',
+        {
+          ref: rootRef,
+          class:
+            state.classes.value +
+            (props.modelValue === null ? ' q-slider--no-value' : ''),
+          ...state.attributes.value,
+          'aria-valuenow': props.modelValue
+        },
+        content
+      )
     }
   }
 })