quasar 2.4.7 → 2.4.11

package/dist/types/ts-helpers.d.ts

@@ -1,11 +1,15 @@
 import { ComponentOptions, ComponentPublicInstance, ComputedOptions, MethodOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
 
-export type LooseDictionary = { [index in string]: any };
-
 export type StringDictionary<T extends string> = Required<
   { [index in T]: string }
 >;
 
+// Needed to prevent TS to collapse `'value1' | 'value2' | string` to `string`, which breaks first parameter autocomplete
+// See: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-832522611
+export type LiteralUnion<T extends U, U = string> =
+  | T
+  | (U & Record<never, never>);
+
 // See: https://stackoverflow.com/a/49936686/7931540
 export type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends Array<infer U>

package/dist/types/utils.d.ts

@@ -1,3 +1,6 @@
+// Error on "quasar" import shown in IDE is normal, as we only have Components/Directives/Plugins types after the build step
+// The import will work correctly at runtime
+import { QUploader } from "quasar";
 import {
   ComponentOptionsMixin,
   ComponentPropsOptions,
@@ -135,4 +138,4 @@ export function createUploaderComponent<
   Emits extends EmitsOptions = []
 >(
   options: CreateUploaderComponentOptions<Props, Emits>
-): DefineComponent<Props, {}, {}, {}, {}, {}, {}, EmitsOptions>;
+): QUploader & DefineComponent<Props, {}, {}, {}, {}, {}, {}, Emits>;

package/dist/vetur/quasar-attributes.json

@@ -5559,6 +5559,10 @@
     "type": "any",
     "description": "Key of node currently selected"
   },
+  "q-tree/no-selection-unset": {
+    "type": "boolean",
+    "description": "Do not allow un-selection when clicking currently selected node"
+  },
   "q-tree/default-expand-all": {
     "type": "boolean",
     "description": "Allow the tree to have all its branches expanded, when first rendered"

package/dist/vetur/quasar-tags.json

@@ -1977,6 +1977,7 @@
       "ticked",
       "expanded",
       "selected",
+      "no-selection-unset",
       "default-expand-all",
       "accordion",
       "filter",

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.4.7",
+  "version": "2.4.11",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -17964,6 +17964,16 @@
               "description": "Key of node currently selected\n\nExamples:\nv-model:selected=\"selectedKey\"",
               "doc-url": "https://v2.quasar.dev/vue-components/tree"
             },
+            {
+              "name": "no-selection-unset",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Do not allow un-selection when clicking currently selected node",
+              "doc-url": "https://v2.quasar.dev/vue-components/tree",
+              "type": "boolean"
+            },
             {
               "name": "default-expand-all",
               "value": {

package/lang/index.json

@@ -135,6 +135,10 @@
     "isoName": "ms",
     "nativeName": "Bahasa Melayu"
   },
+  {
+    "isoName": "my",
+    "nativeName": "Malaysia"
+  },
   {
     "isoName": "nb-NO",
     "nativeName": "Norsk"

package/lang/my.js

@@ -0,0 +1,90 @@
+export default {
+  isoName: 'my',
+  nativeName: 'Malaysia',
+  label: {
+    clear: 'kosong',
+    ok: 'pasti',
+    cancel: 'Batal',
+    close: 'penutupan',
+    set: 'sediakan',
+    select: 'pilih',
+    reset: 'set semula',
+    remove: 'keluarkan',
+    update: 'memperbaharui',
+    create: 'cipta',
+    search: 'cari',
+    filter: 'penapis',
+    refresh: 'segarkan semula'
+  },
+  date: {
+    days: 'Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu'.split('_'),
+    daysShort: 'Aha_Isn_Sel_Rab_Kha_Jum_Sab'.split('_'),
+    months: 'Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember'.split('_'),
+    monthsShort: 'Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogo_Sep_Okt_Nov_Dis'.split('_'),
+    headerTitle: date => new Intl.DateTimeFormat('my', {
+      weekday: 'short', month: 'short', day: 'numeric'
+    }).format(date),
+    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'langit'
+  },
+  table: {
+    noData: 'tiada data tersedia',
+    noResults: 'Tiada data yang sepadan ditemui',
+    loading: 'memuatkan...',
+    selectedRecords: rows => 'dipilih' + rows + 'baris',
+    recordsPerPage: 'baris setiap muka surat:',
+    allRows: 'semua',
+    pagination: (start, end, total) => start + '-' + end + ' / ' + total,
+    columns: 'Senaraikan'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'berani',
+    italic: 'condong',
+    strikethrough: 'tembus',
+    underline: 'gariskan',
+    unorderedList: 'senarai tidak teratur',
+    orderedList: 'senarai pesanan',
+    subscript: 'subskrip',
+    superscript: 'superskrip',
+    hyperlink: 'Hiperpautan',
+    toggleFullscreen: 'togol skrin penuh',
+    quote: 'tanda petikan',
+    left: 'Jajar ke kiri',
+    center: 'penjajaran tengah',
+    right: 'Sejajar ke kanan',
+    justify: 'wajar',
+    print: 'Cetak',
+    outdent: 'mengurangkan lekukan',
+    indent: 'meningkatkan inden',
+    removeFormat: 'gaya yang jelas',
+    formatting: 'format',
+    fontSize: 'Saiz huruf',
+    align: 'selaraskan',
+    hr: 'Masukkan garisan mendatar',
+    undo: 'membatalkan',
+    redo: 'buat semula',
+    heading1: 'Tajuk satu',
+    heading2: 'Tajuk dua',
+    heading3: 'Tajuk tiga',
+    heading4: 'Tajuk Empat',
+    heading5: 'Tajuk Lima',
+    heading6: 'Tajuk Enam',
+    paragraph: 'perenggan',
+    code: 'kod',
+    size1: 'sangat kecil',
+    size2: 'lebih kecil',
+    size3: 'biasa',
+    size4: 'sederhana hingga besar',
+    size5: 'besar',
+    size6: 'sangat besar',
+    size7: 'super besar',
+    defaultFont: 'fon lalai',
+    viewSource: 'menyemak data'
+  },
+  tree: {
+    noNodes: 'tiada nod tersedia',
+    noResults: 'Tiada nod yang sepadan ditemui'
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.4.7",
+  "version": "2.4.11",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/ajax-bar/QAjaxBar.js

@@ -119,7 +119,7 @@ export default createComponent({
     const onScreen = ref(false)
     const animate = ref(true)
 
-    let calls = 0, timer, speed
+    let sessions = 0, timer, speed
 
     const classes = computed(() =>
       `q-loading-bar q-loading-bar--${ props.position }`
@@ -165,16 +165,17 @@ export default createComponent({
       const oldSpeed = speed
       speed = Math.max(0, newSpeed) || 0
 
-      calls++
+      sessions++
 
-      if (calls > 1) {
+      if (sessions > 1) {
         if (oldSpeed === 0 && newSpeed > 0) {
           planNextStep()
         }
         else if (oldSpeed > 0 && newSpeed <= 0) {
           clearTimeout(timer)
         }
-        return
+
+        return sessions
       }
 
       clearTimeout(timer)
@@ -182,25 +183,32 @@ export default createComponent({
 
       progress.value = 0
 
-      if (onScreen.value === true) { return }
-
-      onScreen.value = true
-      animate.value = false
       timer = setTimeout(() => {
         animate.value = true
         newSpeed > 0 && planNextStep()
-      }, 100)
+      }, onScreen.value === true ? 500 : 1)
+
+      if (onScreen.value !== true) {
+        onScreen.value = true
+        animate.value = false
+      }
+
+      return sessions
     }
 
     function increment (amount) {
-      if (calls > 0) {
+      if (sessions > 0) {
         progress.value = inc(progress.value, amount)
       }
+
+      return sessions
     }
 
     function stop () {
-      calls = Math.max(0, calls - 1)
-      if (calls > 0) { return }
+      sessions = Math.max(0, sessions - 1)
+      if (sessions > 0) {
+        return sessions
+      }
 
       clearTimeout(timer)
       emit('stop')
@@ -219,6 +227,8 @@ export default createComponent({
       else {
         end()
       }
+
+      return sessions
     }
 
     function planNextStep () {

package/src/components/ajax-bar/QAjaxBar.json

@@ -73,6 +73,11 @@
           "desc": "Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing",
           "examples": [ 400, 0 ]
         }
+      },
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
       }
     },
 
@@ -84,11 +89,21 @@
           "desc": "Amount (0 < x <= 100) to increment with",
           "examples": [ 1 ]
         }
+      },
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
       }
     },
 
     "stop": {
-      "desc": "Notify bar that one process you were waiting has finished"
+      "desc": "Notify bar that one process you were waiting has finished",
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
+      }
     }
   }
 }

package/src/components/date/QDate.js

@@ -153,7 +153,12 @@ export default createComponent({
       normalizedModel.value
         .filter(date => typeof date === 'string')
         .map(date => decodeString(date, innerMask.value, innerLocale.value))
-        .filter(date => date.dateHash !== null)
+        .filter(date =>
+          date.dateHash !== null
+          && date.day !== null
+          && date.month !== null
+          && date.year !== null
+        )
     )
 
     const rangeModel = computed(() => {

package/src/components/dialog-plugin/DialogPlugin.js

@@ -144,8 +144,8 @@ export default createComponent({
       color: vmColor.value,
       label: okLabel.value,
       ripple: false,
-      ...(Object(props.ok) === props.ok ? props.ok : { flat: true }),
       disable: okDisabled.value,
+      ...(Object(props.ok) === props.ok ? props.ok : { flat: true }),
       'data-autofocus': (props.focus === 'ok' && hasForm.value !== true) || void 0,
       onClick: onOk
     }))

package/src/components/form/QForm.js

@@ -1,4 +1,4 @@
-import { h, ref, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
+import { h, ref, onActivated, onDeactivated, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
@@ -161,6 +161,16 @@ export default createComponent({
       }
     })
 
+    let shouldActivate = false
+
+    onDeactivated(() => {
+      shouldActivate = true
+    })
+
+    onActivated(() => {
+      shouldActivate === true && props.autofocus === true && focus()
+    })
+
     onMounted(() => {
       props.autofocus === true && focus()
     })

package/src/components/icon/QIcon.js

@@ -168,27 +168,22 @@ export default createComponent({
       }
 
       if (type.value.img === true) {
-        return h('div', data, hMergeSlot(slots.default, [
-          h('img', {
-            class: type.value.cls,
-            src: type.value.src
-          })
+        return h('span', data, hMergeSlot(slots.default, [
+          h('img', { src: type.value.src })
         ]))
       }
 
       if (type.value.svg === true) {
-        return h('div', data, hMergeSlot(slots.default, [
+        return h('span', data, hMergeSlot(slots.default, [
           h('svg', {
-            class: type.value.cls,
             viewBox: type.value.viewBox
           }, type.value.nodes)
         ]))
       }
 
       if (type.value.svguse === true) {
-        return h('div', data, hMergeSlot(slots.default, [
+        return h('span', data, hMergeSlot(slots.default, [
           h('svg', {
-            class: type.value.cls,
             viewBox: type.value.viewBox
           }, [
             h('use', { 'xlink:href': type.value.src })

package/src/components/icon/QIcon.sass

@@ -19,9 +19,10 @@
     align-items: center
     justify-content: center
 
-  > svg
-    width: 100%
-    height: 100%
+  > svg,
+  > img
+    width: 1em
+    height: 1em
 
 .q-icon,
 .material-icons,

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -41,7 +41,6 @@ export default createComponent({
     const rootRef = ref(null)
 
     let index = props.initialIndex || 0
-    let scrollPos = false
     let localScrollTarget, poll
 
     const classes = computed(() =>
@@ -180,8 +179,10 @@ export default createComponent({
     watch(() => props.scrollTarget, updateScrollTarget)
     watch(() => props.debounce, setDebounce)
 
+    let scrollPos = false
+
     onActivated(() => {
-      if (localScrollTarget && scrollPos !== false) {
+      if (scrollPos !== false && localScrollTarget) {
         setVerticalScrollPosition(localScrollTarget, scrollPos)
       }
     })

package/src/components/scroll-area/QScrollArea.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -108,6 +108,9 @@ export default createComponent({
         && panning.value === false
       ) || scroll.vertical.size.value <= container.vertical.value + 1
     )
+    scroll.vertical.thumbStart = computed(() =>
+      scroll.vertical.percentage.value * (container.vertical.value - scroll.vertical.thumbSize.value)
+    )
     scroll.vertical.thumbSize = computed(() =>
       Math.round(
         between(
@@ -118,13 +121,11 @@ export default createComponent({
       )
     )
     scroll.vertical.style = computed(() => {
-      const thumbSize = scroll.vertical.thumbSize.value
-      const pos = scroll.vertical.percentage.value * (container.vertical.value - thumbSize)
       return {
         ...props.thumbStyle,
         ...props.verticalThumbStyle,
-        top: `${ pos }px`,
-        height: `${ thumbSize }px`
+        top: `${ scroll.vertical.thumbStart.value }px`,
+        height: `${ scroll.vertical.thumbSize.value }px`
       }
     })
     scroll.vertical.thumbClass = computed(() =>
@@ -149,6 +150,9 @@ export default createComponent({
         && panning.value === false
       ) || scroll.horizontal.size.value <= container.horizontal.value + 1
     )
+    scroll.horizontal.thumbStart = computed(() =>
+      scroll.horizontal.percentage.value * (container.horizontal.value - scroll.horizontal.thumbSize.value)
+    )
     scroll.horizontal.thumbSize = computed(() =>
       Math.round(
         between(
@@ -159,13 +163,11 @@ export default createComponent({
       )
     )
     scroll.horizontal.style = computed(() => {
-      const thumbSize = scroll.horizontal.thumbSize.value
-      const pos = scroll.horizontal.percentage.value * (container.horizontal.value - thumbSize)
       return {
         ...props.thumbStyle,
         ...props.horizontalThumbStyle,
-        left: `${ pos }px`,
-        width: `${ thumbSize }px`
+        left: `${ scroll.horizontal.thumbStart.value }px`,
+        width: `${ scroll.horizontal.thumbSize.value }px`
       }
     })
     scroll.horizontal.thumbClass = computed(() =>
@@ -311,8 +313,11 @@ export default createComponent({
       const data = scroll[ axis ]
 
       if (data.thumbHidden.value !== true) {
-        const pos = evt[ dirProps[ axis ].offset ] - data.thumbSize.value / 2
-        setScroll(pos / container[ axis ].value * data.size.value, axis)
+        const offset = evt[ dirProps[ axis ].offset ]
+        if (offset < data.thumbStart.value || offset > data.thumbStart.value + data.thumbSize.value) {
+          const pos = offset - data.thumbSize.value / 2
+          setScroll(pos / container[ axis ].value * data.size.value, axis)
+        }
 
         // activate thumb pan
         if (data.ref.value !== null) {
@@ -375,6 +380,26 @@ export default createComponent({
       }
     })
 
+    let scrollPosition = null
+
+    onDeactivated(() => {
+      scrollPosition = {
+        top: scroll.vertical.position.value,
+        left: scroll.horizontal.position.value
+      }
+    })
+
+    onActivated(() => {
+      if (scrollPosition === null) { return }
+
+      const scrollTarget = targetRef.value
+
+      if (scrollTarget !== null) {
+        setHorizontalScrollPosition(scrollTarget, scrollPosition.left)
+        setVerticalScrollPosition(scrollTarget, scrollPosition.top)
+      }
+    })
+
     onBeforeUnmount(emitScroll.cancel)
 
     return () => {

package/src/components/scroll-observer/QScrollObserver.js

@@ -47,7 +47,7 @@ export default createComponent({
       }
     }
 
-    let timer = null, localScrollTarget, parentEl
+    let clearTimer = null, localScrollTarget, parentEl
 
     watch(() => props.scrollTarget, () => {
       unconfigureScrollTarget()
@@ -55,9 +55,7 @@ export default createComponent({
     })
 
     function emitEvent () {
-      clearTimeout(timer)
-      cancelAnimationFrame(timer)
-      timer = null
+      clearTimer !== null && clearTimer()
 
       const top = Math.max(0, getVerticalScrollPosition(localScrollTarget))
       const left = getHorizontalScrollPosition(localScrollTarget)
@@ -107,10 +105,15 @@ export default createComponent({
       if (immediately === true || props.debounce === 0 || props.debounce === '0') {
         emitEvent()
       }
-      else if (timer === null) {
-        timer = props.debounce
-          ? setTimeout(emitEvent, props.debounce)
-          : requestAnimationFrame(emitEvent)
+      else if (clearTimer === null) {
+        const [ timer, fn ] = props.debounce
+          ? [ setTimeout(emitEvent, props.debounce), clearTimeout ]
+          : [ requestAnimationFrame(emitEvent), cancelAnimationFrame ]
+
+        clearTimer = () => {
+          fn(timer)
+          clearTimer = null
+        }
       }
     }
 
@@ -122,8 +125,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      clearTimeout(timer)
-      cancelAnimationFrame(timer)
+      clearTimer !== null && clearTimer()
       unconfigureScrollTarget()
     })
 

package/src/components/select/QSelect.js

@@ -644,34 +644,34 @@ export default createComponent({
 
       if (typeof value === 'string' && value.length > 0) {
         const needle = value.toLocaleLowerCase()
+        const findFn = extractFn => {
+          const option = props.options.find(opt => extractFn.value(opt).toLocaleLowerCase() === needle)
 
-        let fn = opt => getOptionValue.value(opt).toLocaleLowerCase() === needle
-        let option = props.options.find(fn)
+          if (option === void 0) {
+            return false
+          }
 
-        if (option !== void 0) {
           if (innerValue.value.indexOf(option) === -1) {
             toggleOption(option)
           }
           else {
             hidePopup()
           }
-        }
-        else {
-          fn = opt => getOptionLabel.value(opt).toLocaleLowerCase() === needle
-          option = props.options.find(fn)
 
-          if (option !== void 0) {
-            if (innerValue.value.indexOf(option) === -1) {
-              toggleOption(option)
-            }
-            else {
-              hidePopup()
-            }
+          return true
+        }
+        const fillFn = afterFilter => {
+          if (findFn(getOptionValue) === true) {
+            return
           }
-          else {
-            filter(value, true)
+          if (findFn(getOptionLabel) === true || afterFilter === true) {
+            return
           }
+
+          filter(value, true, () => fillFn(true))
         }
+
+        fillFn()
       }
       else {
         state.clearValue(e)
@@ -1050,7 +1050,7 @@ export default createComponent({
       }
     }
 
-    function filter (val, keepClosed) {
+    function filter (val, keepClosed, afterUpdateFn) {
       if (props.onFilter === void 0 || (keepClosed !== true && state.focused.value !== true)) {
         return
       }
@@ -1108,6 +1108,7 @@ export default createComponent({
               }
 
               typeof afterFn === 'function' && nextTick(() => { afterFn(proxy) })
+              typeof afterUpdateFn === 'function' && nextTick(() => { afterUpdateFn(proxy) })
             })
           }
         },
@@ -1462,7 +1463,7 @@ export default createComponent({
             h('div', {
               ref: targetRef,
               key: 'd_t',
-              class: 'no-outline',
+              class: 'q-select__focus-target',
               id: state.targetUid.value,
               ...comboboxAttrs.value,
               onKeydown: onTargetKeydown,
@@ -1474,7 +1475,7 @@ export default createComponent({
           if (typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
             child.push(
               h('input', {
-                class: 'q-select__autocomplete-input no-outline',
+                class: 'q-select__autocomplete-input',
                 autocomplete: props.autocomplete,
                 onKeyup: onTargetAutocomplete
               })

package/src/components/select/QSelect.sass

@@ -12,7 +12,10 @@
     &--padding
       padding-left: 4px
 
+  &__focus-target,
   &__autocomplete-input
+    position: absolute
+    outline: 0 !important
     width: 0
     height: 0
     padding: 0