quasar 2.17.0 → 2.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.17.0",
+  "version": "2.17.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "type": "module",
   "module": "dist/quasar.client.js",
@@ -64,7 +64,7 @@
     "cross-env": "^7.0.3",
     "cssnano": "^7.0.6",
     "diff": "^5.2.0",
-    "esbuild": "^0.23.1",
+    "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
@@ -72,11 +72,11 @@
     "open": "^10.1.0",
     "postcss-rtlcss": "^5.4.0",
     "prettier": "^3.3.3",
-    "sass-embedded": "^1.78.0",
+    "sass-embedded": "^1.80.2",
     "table": "^6.8.2",
     "typescript": "^5.6.2",
     "vue": "^3.5.5",
-    "@quasar/extras": "1.16.12",
+    "@quasar/extras": "1.16.13",
     "eslint-config-quasar": "0.0.1"
   },
   "vetur": {

package/src/components/file/QFile.json

@@ -125,7 +125,8 @@
       "desc": "Override default selection slot; Suggestion: QChip",
       "scope": {
         "files": {
-          "type": [ "Array", "FileList" ],
+          "type": "Array",
+          "tsType": "File",
           "desc": "Array of File objects"
         },
 

package/src/components/select/QSelect.js

@@ -171,7 +171,12 @@ export default createComponent({
 
     const onComposition = useKeyComposition(onInput)
 
-    const virtualScrollLength = computed(() => props.options.length)
+    const virtualScrollLength = computed(() => (
+      Array.isArray(props.options)
+        ? props.options.length
+        : 0
+    ))
+
     const virtualScrollItemSizeComputed = computed(() => (
       props.virtualScrollItemSize === void 0
         ? (props.optionsDense === true ? 24 : 48)
@@ -200,7 +205,7 @@ export default createComponent({
           ? (props.multiple === true && Array.isArray(props.modelValue) ? props.modelValue : [ props.modelValue ])
           : []
 
-      if (props.mapOptions === true) {
+      if (props.mapOptions === true && Array.isArray(props.options) === true) {
         const cache = props.mapOptions === true && innerValueCache !== void 0
           ? innerValueCache
           : []
@@ -665,11 +670,9 @@ 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)
+          const option = props.options.find(opt => String(extractFn.value(opt)).toLocaleLowerCase() === needle)
 
-          if (option === void 0) {
-            return false
-          }
+          if (option === void 0) return false
 
           if (innerValue.value.indexOf(option) === -1) {
             toggleOption(option)
@@ -681,14 +684,13 @@ export default createComponent({
           return true
         }
         const fillFn = afterFilter => {
-          if (findFn(getOptionValue) === true) {
-            return
+          if (
+            findFn(getOptionValue) !== true
+            && afterFilter !== true
+            && findFn(getOptionLabel) !== true
+          ) {
+            filter(value, true, () => fillFn(true))
           }
-          if (findFn(getOptionLabel) === true || afterFilter === true) {
-            return
-          }
-
-          filter(value, true, () => fillFn(true))
         }
 
         fillFn()

package/src/components/time/QTime.sass

@@ -1,4 +1,4 @@
-@import '../../css/helpers/math.sass'
+@use 'sass:math'
 
 .q-time
   box-shadow: $shadow-2
@@ -129,8 +129,8 @@
     $left: (1 + cos($angle))
 
     &__clock-pos-#{$pos}
-      top: toFixed(percentage($top * 0.5), 100)
-      left: toFixed(percentage($left * 0.5), 100) #{"/* rtl:ignore */"}
+      top: toFixed(math.percentage($top * 0.5), 100)
+      left: toFixed(math.percentage($left * 0.5), 100) #{"/* rtl:ignore */"}
 
   @for $pos from 12 through 23
     $angle: (270 + 30 * $pos)
@@ -138,8 +138,8 @@
     $left: (1 + cos($angle))
 
     &__clock-pos-#{$pos}
-      top: toFixed(percentage(.15 + $top * .35), 100)
-      left: toFixed(percentage(.15 + $left * .35), 100) #{"/* rtl:ignore */"}
+      top: toFixed(math.percentage(.15 + $top * .35), 100)
+      left: toFixed(math.percentage(.15 + $left * .35), 100) #{"/* rtl:ignore */"}
 
   &__now-button
     background-color: var(--q-primary)

package/src/components/uploader/QUploader.json

@@ -212,18 +212,6 @@
         }
       },
       "returns": null
-    },
-
-    "addFiles": {
-      "desc": "Manually add files to the queue",
-      "params": {
-        "files": {
-          "type": "Array",
-          "required": true,
-          "desc": "Must be an array of instances of JS File type"
-        }
-      },
-      "returns": null
     }
   },
 

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

@@ -44,12 +44,14 @@
       "desc": "Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "files": {
-          "type": [ "Array", "FileList" ],
+          "type": "Array",
+          "tsType": "File",
           "desc": "Candidate files to be added to queue"
         }
       },
       "returns": {
         "type": "Array",
+        "tsType": "File",
         "desc": "Filtered files to be added to queue"
       },
       "examples": [ "files => files.filter(file => file.size === 1024)" ],
@@ -86,7 +88,8 @@
       "params": {
         "files": {
           "type": [ "Array", "FileList" ],
-          "desc": "Array of files (instances of File)",
+          "tsType": "QUseFileAddInput",
+          "desc": "Array of files (instances of File) or FileList",
           "required": true
         }
       },

package/src/composables/private.use-key-composition/use-key-composition.js

@@ -1,3 +1,10 @@
+import { client } from '../../plugins/platform/Platform.js'
+
+const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
+const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
+const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/
+const isPlainText = /[a-z0-9_ -]$/i
+
 export default function (onInput) {
   return function onComposition (e) {
     if (e.type === 'compositionend' || e.type === 'change') {
@@ -5,8 +12,18 @@ export default function (onInput) {
       e.target.qComposing = false
       onInput(e)
     }
-    else if (e.type === 'compositionstart') {
-      e.target.qComposing = true
+    else if (
+      e.type === 'compositionupdate'
+      && e.target.qComposing !== true
+      && typeof e.data === 'string'
+    ) {
+      const isComposing = client.is.firefox === true
+        ? isPlainText.test(e.data) === false
+        : isJapanese.test(e.data) === true || isChinese.test(e.data) === true || isKorean.test(e.data) === true
+
+      if (isComposing === true) {
+        e.target.qComposing = true
+      }
     }
   }
 }

package/src/composables/use-timeout/use-timeout.js

@@ -26,7 +26,7 @@ export default function () {
     removeTimeout,
 
     registerTimeout (fn, delay) {
-      removeTimeout(timer)
+      removeTimeout()
 
       if (vmIsDestroyed(vm) === false) {
         timer = setTimeout(() => {

package/src/css/core/elevation.sass

@@ -1,11 +1,13 @@
+@use 'sass:list'
+
 .shadow-transition
   transition: $shadow-transition !important
 
 @for $z from 1 through 24
   .shadow-#{$z}
-    box-shadow: nth($shadows, $z)
+    box-shadow: list.nth($shadows, $z)
   .shadow-up-#{$z}
-    box-shadow: nth($shadows-up, $z)
+    box-shadow: list.nth($shadows-up, $z)
 
 .inset-shadow
   box-shadow: $inset-shadow
@@ -15,9 +17,9 @@
 body.body--dark
   @for $z from 1 through 24
     .shadow-#{$z}
-      box-shadow: nth($dark-shadows, $z)
+      box-shadow: list.nth($dark-shadows, $z)
     .shadow-up-#{$z}
-      box-shadow: nth($dark-shadows-up, $z)
+      box-shadow: list.nth($dark-shadows-up, $z)
 
   .inset-shadow
     box-shadow: $inset-dark-shadow

package/src/css/core/flex.sass

@@ -1,6 +1,5 @@
 @use 'sass:math'
-
-@import '../helpers/string.sass'
+@use 'sass:string'
 
 @mixin fg($name, $size)
   $noProcNotZero: $size > 0
@@ -26,19 +25,19 @@
         flex: 0 1 auto
 
     @for $i from 0 through $flex-cols
-      $ic: quote('' + $i)
+      $ic: string.quote('' + $i)
       #{str-fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
         @extend .col#{$name}-auto
       .row
         #{str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
           height: auto
-          width: toFixed(percentage(math.div($i, $flex-cols)), 10000)
+          width: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)
         @if $i != 0 or $name != ''
           #{str-fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
-            margin-left: toFixed(percentage(math.div($i, $flex-cols)), 10000)
+            margin-left: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)
       .column
         #{str-fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
-          height: toFixed(percentage(math.div($i, $flex-cols)), 10000)
+          height: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)
           width: auto
       @if $size == 0 and $i == $flex-cols
         .row > .col-all

package/src/css/core/size.sass

@@ -1,3 +1,5 @@
+@use 'sass:map'
+
 \:root
   @each $name, $size in $sizes
     #{"--q-size-"}#{$name}: #{$size}
@@ -29,38 +31,38 @@
 @each $space, $value in $spaces
 
   .q-pa-#{$space}
-    padding: map-get($value, "y") map-get($value, "x")
+    padding: map.get($value, "y") map.get($value, "x")
   .q-pl-#{$space}
-    padding-left: map-get($value, "x")
+    padding-left: map.get($value, "x")
   .q-pr-#{$space}
-    padding-right: map-get($value, "x")
+    padding-right: map.get($value, "x")
   .q-pt-#{$space}
-    padding-top: map-get($value, "y")
+    padding-top: map.get($value, "y")
   .q-pb-#{$space}
-    padding-bottom: map-get($value, "y")
+    padding-bottom: map.get($value, "y")
   .q-px-#{$space}
-    padding-left: map-get($value, "x")
-    padding-right: map-get($value, "x")
+    padding-left: map.get($value, "x")
+    padding-right: map.get($value, "x")
   .q-py-#{$space}
-    padding-top: map-get($value, "y")
-    padding-bottom: map-get($value, "y")
+    padding-top: map.get($value, "y")
+    padding-bottom: map.get($value, "y")
 
   .q-ma-#{$space}
-    margin: map-get($value, "y") map-get($value, "x")
+    margin: map.get($value, "y") map.get($value, "x")
   .q-ml-#{$space}
-    margin-left: map-get($value, "x")
+    margin-left: map.get($value, "x")
   .q-mr-#{$space}
-    margin-right: map-get($value, "x")
+    margin-right: map.get($value, "x")
   .q-mt-#{$space}
-    margin-top: map-get($value, "y")
+    margin-top: map.get($value, "y")
   .q-mb-#{$space}
-    margin-bottom: map-get($value, "y")
+    margin-bottom: map.get($value, "y")
   .q-mx-#{$space}
-    margin-left: map-get($value, "x")
-    margin-right: map-get($value, "x")
+    margin-left: map.get($value, "x")
+    margin-right: map.get($value, "x")
   .q-my-#{$space}
-    margin-top: map-get($value, "y")
-    margin-bottom: map-get($value, "y")
+    margin-top: map.get($value, "y")
+    margin-bottom: map.get($value, "y")
 
 .q-mt-auto, .q-my-auto
   margin-top: auto

package/src/css/core/typography.sass

@@ -1,3 +1,5 @@
+@use 'sass:map'
+
 body
   min-width: 100px
   min-height: 100%
@@ -12,21 +14,21 @@ body
 
 @each $heading, $value in $h-tags
   #{$heading}
-    font-size: map-get($value, "size")
-    font-weight: map-get($value, "weight")
-    line-height: map-get($value, "line-height")
-    letter-spacing: map-get($value, "letter-spacing")
+    font-size: map.get($value, "size")
+    font-weight: map.get($value, "weight")
+    line-height: map.get($value, "line-height")
+    letter-spacing: map.get($value, "letter-spacing")
 
 p
-  margin: 0 0 map-get(map-get($spaces, "md"), "y")
+  margin: 0 0 map.get(map.get($spaces, "md"), "y")
 
 .text-
   @each $heading, $value in $headings
     &#{$heading}
-      font-size: map-get($value, "size")
-      font-weight: map-get($value, "weight")
-      line-height: map-get($value, "line-height")
-      letter-spacing: map-get($value, "letter-spacing")
+      font-size: map.get($value, "size")
+      font-weight: map.get($value, "weight")
+      line-height: map.get($value, "line-height")
+      letter-spacing: map.get($value, "letter-spacing")
 
   &uppercase
     text-transform: uppercase

package/src/css/flex-addon.sass

@@ -1,4 +1,6 @@
 @use 'sass:math'
+@use 'sass:map'
+@use 'sass:string'
 
 @import './helpers/string.sass'
 @import './helpers/math.sass'
@@ -18,38 +20,38 @@
 
     @each $space, $value in $spaces
       .q-pa#{$name}-#{$space}
-        padding: map-get($value, "y") map-get($value, "x")
+        padding: map.get($value, "y") map.get($value, "x")
       .q-pl#{$name}-#{$space}
-        padding-left: map-get($value, "x")
+        padding-left: map.get($value, "x")
       .q-pr#{$name}-#{$space}
-        padding-right: map-get($value, "x")
+        padding-right: map.get($value, "x")
       .q-pt#{$name}-#{$space}
-        padding-top: map-get($value, "y")
+        padding-top: map.get($value, "y")
       .q-pb#{$name}-#{$space}
-        padding-bottom: map-get($value, "y")
+        padding-bottom: map.get($value, "y")
       .q-px#{$name}-#{$space}
-        padding-left: map-get($value, "x")
-        padding-right: map-get($value, "x")
+        padding-left: map.get($value, "x")
+        padding-right: map.get($value, "x")
       .q-py#{$name}-#{$space}
-        padding-top: map-get($value, "y")
-        padding-bottom: map-get($value, "y")
+        padding-top: map.get($value, "y")
+        padding-bottom: map.get($value, "y")
 
       .q-ma#{$name}-#{$space}
-        margin: map-get($value, "y") map-get($value, "x")
+        margin: map.get($value, "y") map.get($value, "x")
       .q-ml#{$name}-#{$space}
-        margin-left: map-get($value, "x")
+        margin-left: map.get($value, "x")
       .q-mr#{$name}-#{$space}
-        margin-right: map-get($value, "x")
+        margin-right: map.get($value, "x")
       .q-mt#{$name}-#{$space}
-        margin-top: map-get($value, "y")
+        margin-top: map.get($value, "y")
       .q-mb#{$name}-#{$space}
-        margin-bottom: map-get($value, "y")
+        margin-bottom: map.get($value, "y")
       .q-mx#{$name}-#{$space}
-        margin-left: map-get($value, "x")
-        margin-right: map-get($value, "x")
+        margin-left: map.get($value, "x")
+        margin-right: map.get($value, "x")
       .q-my#{$name}-#{$space}
-        margin-top: map-get($value, "y")
-        margin-bottom: map-get($value, "y")
+        margin-top: map.get($value, "y")
+        margin-bottom: map.get($value, "y")
 
     .q-ml#{$name}-auto
       margin-left: auto
@@ -195,8 +197,8 @@
         $noProcNotZero2: ($size2 > 0)
 
         @for $i from 0 through $flex-cols
-          $ic: quote('' + $i)
-          $internal-size: toFixed(percentage(math.div($i, $flex-cols)), 10000)
+          $ic: string.quote('' + $i)
+          $internal-size: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)
 
           #{str-fr('.row<name>', $name)}
             #{str-fe('> .col<name>-<i>', $name2c, $noProcNotZero2, $ic)}

package/src/css/helpers/math.sass

@@ -23,7 +23,7 @@ $PI: 3.14159265359
 // toFixed(0.12345, 100) -> 0.12
 // toFixed(0.12345, 1000) -> 0.123
 @function toFixed($number, $power)
-  @return math.div(round($number * $power), $power)
+  @return math.div(math.round($number * $power), $power)
 
 @function sin($angle)
   $sin: 0

package/src/css/helpers/string.sass

@@ -1,9 +1,12 @@
+@use 'sass:list'
+@use 'sass:string'
+
 @function str-replace($string, $search, $replace: '')
-  $index: str-index($string, $search)
+  $index: string.index($string, $search)
 
   @if $index
-    $start: str-slice($string, 1, $index - 1)
-    $end: str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
+    $start: string.slice($string, 1, $index - 1)
+    $end: str-replace(string.slice($string, $index + string.length($search)), $search, $replace)
     @return $start + $replace + $end
 
   @return $string
@@ -14,4 +17,4 @@
 @function str-fe($selector, $name, $noProc, $i: '')
   @if $noProc
     @return str-fr($selector, $name, $i)
-  @return join(str-fr($selector, '', $i), str-fr($selector, $name, $i), $separator: comma)
+  @return list.join(str-fr($selector, '', $i), str-fr($selector, $name, $i), $separator: comma)

package/src/css/variables.sass

@@ -1,3 +1,5 @@
+@use 'sass:map'
+
 $space-base   : 16px !default
 $space-x-base : $space-base !default
 $space-y-base : $space-base !default
@@ -39,18 +41,18 @@ $flex-gutter: ('none': 0, 'xs': $flex-gutter-xs, 'sm': $flex-gutter-sm, 'md': $f
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $sizes: ('xs': 0, 'sm': ($breakpoint-xs + 1), 'md': ($breakpoint-sm + 1), 'lg': ($breakpoint-md + 1), 'xl': ($breakpoint-lg + 1)) !default
 
-$breakpoint-xs-max: (map-get($sizes, "sm") - 0.02) !default
+$breakpoint-xs-max: (map.get($sizes, "sm") - 0.02) !default
 
-$breakpoint-sm-min: map-get($sizes, "sm") !default
-$breakpoint-sm-max: (map-get($sizes, "md") - 0.02) !default
+$breakpoint-sm-min: map.get($sizes, "sm") !default
+$breakpoint-sm-max: (map.get($sizes, "md") - 0.02) !default
 
-$breakpoint-md-min: map-get($sizes, "md") !default
-$breakpoint-md-max: (map-get($sizes, "lg") - 0.02) !default
+$breakpoint-md-min: map.get($sizes, "md") !default
+$breakpoint-md-max: (map.get($sizes, "lg") - 0.02) !default
 
-$breakpoint-lg-min: map-get($sizes, "lg") !default
-$breakpoint-lg-max: (map-get($sizes, "xl") - 0.02) !default
+$breakpoint-lg-min: map.get($sizes, "lg") !default
+$breakpoint-lg-max: (map.get($sizes, "xl") - 0.02) !default
 
-$breakpoint-xl-min: map-get($sizes, "xl") !default
+$breakpoint-xl-min: map.get($sizes, "xl") !default
 
 $h1:        (size: 6rem,     line-height: 6rem,     letter-spacing: -.01562em, weight: 300) !default
 $h2:        (size: 3.75rem,  line-height: 3.75rem,  letter-spacing: -.00833em, weight: 300) !default
@@ -69,7 +71,7 @@ $caption:   (size: .75rem,   line-height: 1.25rem,  letter-spacing: .03333em,  w
 $headings: ('h1': $h1, 'h2': $h2, 'h3': $h3, 'h4': $h4, 'h5': $h5, 'h6': $h6, 'subtitle1': $subtitle1, 'subtitle2': $subtitle2, 'body1': $body1, 'body2': $body2, 'overline': $overline, 'caption': $caption) !default
 
 // sorry for long line; we need .sass and it doesn't support multi-line list
-$h-tags: (h1: map-get($headings, "h1"), h2: map-get($headings, "h2"), h3: map-get($headings, "h3"), h4: map-get($headings, "h4"), h5: map-get($headings, "h5"), h6: map-get($headings, "h6")) !default
+$h-tags: (h1: map.get($headings, "h1"), h2: map.get($headings, "h2"), h3: map.get($headings, "h3"), h4: map.get($headings, "h4"), h5: map.get($headings, "h5"), h6: map.get($headings, "h6")) !default
 
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $text-weights: (thin: 100, light: 300, regular: 400, medium: 500, bold: 700, bolder: 900) !default

package/src/utils/private.config/nodes.js

@@ -39,9 +39,7 @@ export function removeGlobalNode (el) {
 }
 
 export function changeGlobalNodesTarget (newTarget) {
-  if (newTarget === target) {
-    return
-  }
+  if (newTarget === target) return
 
   target = newTarget
 

package/wrappers/index.cjs

@@ -38,6 +38,7 @@ module.exports.bexContent = function (callback) {
   return callback
 }
 
+// legacy q/app-vite v1 & q/app-webpack v3
 module.exports.bexDom = function (callback) {
   return callback
 }

package/wrappers/index.js

@@ -38,6 +38,7 @@ export function bexContent (callback) {
   return callback
 }
 
+// Below only for @quasar/app-vite v1 & @quasar/app-webpack v3
 export function bexDom (callback) {
   return callback
 }