quasar 2.18.7 → 2.19.1

package/src/components/item/QList.test.js

@@ -6,7 +6,7 @@ import QList from './QList.js'
 describe('[QList API]', () => {
   describe('[Props]', () => {
     describe('[default attributes]', () => {
-      test('has a role="list" attribute with a div', async () => {
+      test('has a role="list" attribute with a div', () => {
         const wrapper = mount(QList)
 
         const target = wrapper.get('.q-list')
@@ -14,7 +14,7 @@ describe('[QList API]', () => {
         expect(target.element.getAttribute('role')).toBe('list')
       })
 
-      test('does not have a role="list" attribute with a ol', async () => {
+      test('does not have a role="list" attribute with a ol', () => {
         const wrapper = mount(QList, { props: { tag: 'ol' } })
 
         const target = wrapper.get('.q-list')
@@ -22,7 +22,7 @@ describe('[QList API]', () => {
         expect(target.element.getAttribute('role')).toBe(null)
       })
 
-      test('does not have a role="list" attribute with a ul', async () => {
+      test('does not have a role="list" attribute with a ul', () => {
         const wrapper = mount(QList, { props: { tag: 'ul' } })
 
         const target = wrapper.get('.q-list')
@@ -131,24 +131,20 @@ describe('[QList API]', () => {
     })
 
     describe('[(prop)tag]', () => {
-      test('type String has effect', async () => {
+      test('type String has effect', () => {
         const wrapper = mount(QList, { props: { tag: 'ol' } })
 
         const target = wrapper.get('.q-list')
 
-        expect(
-          target.element.tagName.toLowerCase()
-        ).toBe('ol')
+        expect(target.element.tagName.toLowerCase()).toBe('ol')
       })
 
-      test('default tag is div', async () => {
+      test('default tag is div', () => {
         const wrapper = mount(QList)
 
         const target = wrapper.get('.q-list')
 
-        expect(
-          target.element.tagName.toLowerCase()
-        ).toBe('div')
+        expect(target.element.tagName.toLowerCase()).toBe('div')
       })
     })
   })

package/src/components/item/index.js

@@ -4,10 +4,4 @@ import QItem from './QItem.js'
 import QItemSection from './QItemSection.js'
 import QItemLabel from './QItemLabel.js'
 
-export {
-  QList,
-
-  QItem,
-  QItemSection,
-  QItemLabel
-}
+export { QList, QItem, QItemSection, QItemLabel }

package/src/components/knob/QKnob.js

@@ -8,11 +8,14 @@ import { position, stopAndPrevent } from '../../utils/event/event.js'
 import { between, normalizeToInterval } from '../../utils/format/format.js'
 import { hDir } from '../../utils/private.render/render.js'
 
-import { useFormProps, useFormAttrs } from '../../composables/use-form/private.use-form.js'
+import {
+  useFormProps,
+  useFormAttrs
+} from '../../composables/use-form/private.use-form.js'
 import { useCircularCommonProps } from '../circular-progress/circular-progress.js'
 
 // PGDOWN, LEFT, DOWN, PGUP, RIGHT, UP
-const keyCodes = [ 34, 37, 40, 33, 39, 38 ]
+const keyCodes = [34, 37, 40, 33, 39, 38]
 const commonPropsName = Object.keys(useCircularCommonProps)
 
 export default createComponent({
@@ -37,7 +40,7 @@ export default createComponent({
     },
 
     tabindex: {
-      type: [ Number, String ],
+      type: [Number, String],
       default: 0
     },
 
@@ -45,109 +48,114 @@ export default createComponent({
     readonly: Boolean
   },
 
-  emits: [ 'update:modelValue', 'change', 'dragValue' ],
+  emits: ['update:modelValue', 'change', 'dragValue'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
     const model = ref(props.modelValue)
     const dragging = ref(false)
 
-    const innerMin = computed(() => (
+    const innerMin = computed(() =>
       isNaN(props.innerMin) === true || props.innerMin < props.min
         ? props.min
         : props.innerMin
-    ))
-    const innerMax = computed(() => (
+    )
+    const innerMax = computed(() =>
       isNaN(props.innerMax) === true || props.innerMax > props.max
         ? props.max
         : props.innerMax
-    ))
+    )
 
     let centerPosition
 
-    function normalizeModel () {
-      model.value = props.modelValue === null
-        ? innerMin.value
-        : between(props.modelValue, innerMin.value, innerMax.value)
+    function normalizeModel() {
+      model.value =
+        props.modelValue === null
+          ? innerMin.value
+          : between(props.modelValue, innerMin.value, innerMax.value)
 
       updateValue(true)
     }
 
     watch(
-      () => `${ props.modelValue }|${ innerMin.value }|${ innerMax.value }`,
+      () => `${props.modelValue}|${innerMin.value}|${innerMax.value}`,
       normalizeModel
     )
 
     normalizeModel()
 
-    const editable = computed(() => props.disable === false && props.readonly === false)
+    const editable = computed(
+      () => props.disable === false && props.readonly === false
+    )
 
-    const classes = computed(() =>
-      'q-knob non-selectable' + (
-        editable.value === true
+    const classes = computed(
+      () =>
+        'q-knob non-selectable' +
+        (editable.value === true
           ? ' q-knob--editable'
-          : (props.disable === true ? ' disabled' : '')
-      )
+          : props.disable === true
+            ? ' disabled'
+            : '')
     )
 
-    const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length)
+    const decimals = computed(
+      () => (String(props.step).trim().split('.')[1] || '').length
+    )
     const step = computed(() => (props.step === 0 ? 1 : props.step))
-    const instantFeedback = computed(() => props.instantFeedback === true || dragging.value === true)
-
-    const onEvents = $q.platform.is.mobile === true
-      ? computed(() => (editable.value === true ? { onClick } : {}))
-      : computed(() => (
-        editable.value === true
-          ? {
-              onMousedown,
-              onClick,
-              onKeydown,
-              onKeyup
-            }
-          : {}
-      ))
-
-    const attrs = computed(() => (
+    const instantFeedback = computed(
+      () => props.instantFeedback === true || dragging.value === true
+    )
+
+    const onEvents =
+      $q.platform.is.mobile === true
+        ? computed(() => (editable.value === true ? { onClick } : {}))
+        : computed(() =>
+            editable.value === true
+              ? {
+                  onMousedown,
+                  onClick,
+                  onKeydown,
+                  onKeyup
+                }
+              : {}
+          )
+
+    const attrs = computed(() =>
       editable.value === true
         ? { tabindex: props.tabindex }
-        : { [ `aria-${ props.disable === true ? 'disabled' : 'readonly' }` ]: 'true' }
-    ))
+        : {
+            [`aria-${props.disable === true ? 'disabled' : 'readonly'}`]: 'true'
+          }
+    )
 
     const circularProps = computed(() => {
       const agg = {}
       commonPropsName.forEach(name => {
-        agg[ name ] = props[ name ]
+        agg[name] = props[name]
       })
       return agg
     })
 
-    function pan (event) {
+    function pan(event) {
       if (event.isFinal) {
         updatePosition(event.evt, true)
         dragging.value = false
-      }
-      else if (event.isFirst) {
+      } else if (event.isFirst) {
         updateCenterPosition()
         dragging.value = true
         updatePosition(event.evt)
-      }
-      else {
+      } else {
         updatePosition(event.evt)
       }
     }
 
-    const directives = computed(() => {
-      return [ [
-        TouchPan,
-        pan,
-        void 0,
-        { prevent: true, stop: true, mouse: true }
-      ] ]
-    })
+    const directives = computed(() => [
+      [TouchPan, pan, void 0, { prevent: true, stop: true, mouse: true }]
+    ])
 
-    function updateCenterPosition () {
+    function updateCenterPosition() {
       const { top, left, width, height } = proxy.$el.getBoundingClientRect()
       centerPosition = {
         top: top + height / 2,
@@ -155,24 +163,23 @@ export default createComponent({
       }
     }
 
-    function onMousedown (evt) {
+    function onMousedown(evt) {
       updateCenterPosition()
       updatePosition(evt)
     }
 
-    function onClick (evt) {
+    function onClick(evt) {
       updateCenterPosition()
       updatePosition(evt, 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) * step.value,
-        offset = [ 34, 37, 40 ].includes(evt.keyCode) ? -stepVal : stepVal
+      const stepVal = ([34, 33].includes(evt.keyCode) ? 10 : 1) * step.value,
+        offset = [34, 37, 40].includes(evt.keyCode) ? -stepVal : stepVal
 
       model.value = between(
         parseFloat((model.value + offset).toFixed(decimals.value)),
@@ -183,28 +190,24 @@ export default createComponent({
       updateValue()
     }
 
-    function updatePosition (evt, change) {
-      const
-        pos = position(evt),
+    function updatePosition(evt, change) {
+      const pos = position(evt),
         height = Math.abs(pos.top - centerPosition.top),
         distance = Math.sqrt(
-          height ** 2
-          + Math.abs(pos.left - centerPosition.left) ** 2
+          height ** 2 + Math.abs(pos.left - centerPosition.left) ** 2
         )
 
       let angle = Math.asin(height / distance) * (180 / Math.PI)
 
       if (pos.top < centerPosition.top) {
         angle = centerPosition.left < pos.left ? 90 - angle : 270 + angle
-      }
-      else {
+      } else {
         angle = centerPosition.left < pos.left ? angle + 90 : 270 - angle
       }
 
       if ($q.lang.rtl === true) {
         angle = normalizeToInterval(-angle - props.angle, 0, 360)
-      }
-      else if (props.angle) {
+      } else if (props.angle) {
         angle = normalizeToInterval(angle - props.angle, 0, 360)
       }
 
@@ -217,8 +220,12 @@ export default createComponent({
       if (step.value !== 0) {
         const modulo = newModel % step.value
 
-        newModel = newModel - modulo
-          + (Math.abs(modulo) >= step.value / 2 ? (modulo < 0 ? -1 : 1) * step.value : 0)
+        newModel =
+          newModel -
+          modulo +
+          (Math.abs(modulo) >= step.value / 2
+            ? (modulo < 0 ? -1 : 1) * step.value
+            : 0)
 
         newModel = parseFloat(newModel.toFixed(decimals.value))
       }
@@ -234,20 +241,23 @@ export default createComponent({
       updateValue(change)
     }
 
-    function onKeyup (evt) {
+    function onKeyup(evt) {
       if (keyCodes.includes(evt.keyCode)) {
         updateValue(true)
       }
     }
 
-    function updateValue (change) {
-      props.modelValue !== model.value && emit('update:modelValue', model.value)
-      change === true && emit('change', model.value)
+    function updateValue(change) {
+      if (props.modelValue !== model.value) {
+        emit('update:modelValue', model.value)
+      }
+
+      if (change === true) emit('change', model.value)
     }
 
     const formAttrs = useFormAttrs(props)
 
-    function getNameInput () {
+    function getNameInput() {
       return h('input', formAttrs.value)
     }
 

package/src/components/knob/QKnob.json

@@ -1,5 +1,8 @@
 {
-  "mixins": [ "composables/private.use-size/use-size", "composables/use-form/private.use-form" ],
+  "mixins": [
+    "composables/private.use-size/use-size",
+    "composables/use-form/private.use-form"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/knob"
@@ -10,7 +13,7 @@
       "extends": "model-value",
       "type": "Number",
       "desc": "Any number to indicate the given value of the knob. Either use this property (along with a listener for 'update:modelValue' event) OR use the v-model directive",
-      "examples": [ "# v-model=\"myValue\"" ]
+      "examples": ["# v-model=\"myValue\""]
     },
 
     "min": {
@@ -77,7 +80,7 @@
     "font-size": {
       "type": "String",
       "desc": "Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size",
-      "examples": [ "'1em'", "'16px'", "'2rem'" ],
+      "examples": ["'1em'", "'16px'", "'2rem'"],
       "category": "style"
     },
 

package/src/components/knob/index.js

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