quasar 2.4.6 → 2.4.10

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.6",
+  "version": "2.4.10",
   "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.6",
+  "version": "2.4.10",
   "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/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/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/layout/QLayout.js

@@ -175,7 +175,7 @@ export default createComponent({
 
     // prevent scrollbar flicker while resizing window height
     // if no page scrollbar is already present
-    if (__QUASAR_SSR__ !== true) {
+    if (__QUASAR_SSR_SERVER__ !== true && getScrollbarWidth() > 0) {
       let timer = null
       const el = document.body
 
@@ -188,7 +188,7 @@ export default createComponent({
         if (timer === null) {
           // if it has no scrollbar then there's nothing to do
 
-          if (el.scrollHeight > window.innerHeight) {
+          if (el.scrollHeight > $q.screen.height) {
             return
           }
 
@@ -211,11 +211,12 @@ export default createComponent({
       }
 
       watch(
-        () => (props.container !== true && scrollbarWidth.value > 0 ? 'add' : 'remove'),
-        updateScrollEvent,
-        { immediate: true }
+        () => (props.container !== true ? 'add' : 'remove'),
+        updateScrollEvent
       )
 
+      props.container !== true && updateScrollEvent('add')
+
       onUnmounted(() => {
         updateScrollEvent('remove')
       })

package/src/components/scroll-area/QScrollArea.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) {

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

package/src/components/tree/QTree.js

@@ -58,6 +58,8 @@ export default createComponent({
     expanded: Array, // v-model:expanded
     selected: {}, // v-model:selected
 
+    noSelectionUnset: Boolean,
+
     defaultExpandAll: Boolean,
     accordion: Boolean,
 
@@ -615,7 +617,10 @@ export default createComponent({
 
       if (hasSelection.value) {
         if (meta.selectable) {
-          emit('update:selected', meta.key !== props.selected ? meta.key : null)
+          const val = meta.key !== props.selected ? meta.key : null
+          if (props.noSelectionUnset !== true || val !== null) {
+            emit('update:selected', val)
+          }
         }
       }
       else {

package/src/components/tree/QTree.json

@@ -6,6 +6,7 @@
   "props": {
     "nodes": {
       "type": "Array",
+      "tsType": "QTreeNode",
       "desc": "The array of nodes that designates the tree structure",
       "required": true,
       "examples": [ "[ {...}, {...} ]" ],
@@ -106,6 +107,13 @@
       "category": "state"
     },
 
+    "no-selection-unset": {
+      "type": "Boolean",
+      "desc": "Do not allow un-selection when clicking currently selected node",
+      "category": "behavior",
+      "addedIn": "v2.4.10"
+    },
+
     "default-expand-all": {
       "type": "Boolean",
       "desc": "Allow the tree to have all its branches expanded, when first rendered",

package/src/components/uploader/uploader-core.js

@@ -436,6 +436,8 @@ export function getRenderer (getPlugin) {
     abort: state.abort
   }
 
+  // TODO: the result of this computed, especially the dynamic part, isn't currently typed
+  // This result in an error with Volar when accessing the state (eg. files array)
   const slotScope = computed(() => {
     const acc = {
       canAddFiles: canAddFiles.value,

package/src/components/uploader/xhr-uploader-plugin.json

@@ -2,6 +2,7 @@
   "props": {
     "factory": {
       "type": "Function",
+      "tsType": "QUploaderFactoryFn",
       "desc": "Function which should return an Object or a Promise resolving with an Object; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "files": {
@@ -112,7 +113,7 @@
       },
       "returns": {
         "type": "String",
-        "desc": "An array consists of objects with header definitions",
+        "desc": "An array consisting of objects with header definitions",
         "__exemption": [ "examples" ]
       },
       "category": "upload"

package/src/composables/private/use-field.js

@@ -402,6 +402,8 @@ export default function (state) {
             name: props.clearIcon || $q.iconSet.field.clear,
             tabindex: 0,
             type: 'button',
+            'aria-hidden': null,
+            role: null,
             onClick: clearValue
           })
         ])

package/src/composables/private/use-file.json

@@ -72,6 +72,7 @@
       "params": {
         "rejectedEntries": {
           "type": "Array",
+          "tsType": "QRejectedEntry",
           "desc": "Array of { failedPropValidation: string, file: File } Objects for files that do not pass the validation",
           "__exemption": ["examples"]
         }