quasar 2.17.0 → 2.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.17.0",
+  "version": "2.17.1",
   "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,7 +72,7 @@
     "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",

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/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/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/core/visibility.sass

@@ -27,12 +27,12 @@
 
 .readonly
   cursor: default !important
-.disabled, [disabled]
+.disabled, [disabled]:not([disabled=false])
   &,
   *
     outline: 0 !important
     cursor: not-allowed !important
-.disabled, [disabled]
+.disabled, [disabled]:not([disabled=false])
   opacity: .6 !important
 
 .hidden

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