quasar 2.21.4 → 2.23.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quasar",
-  "version": "2.21.4",
-  "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
+  "version": "2.23.0",
+  "description": "Build high-performance Vue.js user interfaces (SPA, PWA, SSR, SSG, Mobile and Desktop) in record time",
   "keywords": [
     "desktop",
     "electron",
@@ -65,15 +65,15 @@
     "diff": "^9.0.0",
     "fs-extra": "^11.3.6",
     "kolorist": "^1.8.0",
-    "lightningcss": "^1.32.0",
+    "lightningcss": "^1.33.0",
     "open": "^11.0.0",
-    "postcss": "^8.5.16",
+    "postcss": "^8.5.20",
     "postcss-rtlcss": "^6.0.0",
-    "rolldown": "^1.1.5",
+    "rolldown": "^1.2.0",
     "sass-embedded": "^1.100.0",
     "table": "^6.8.2",
     "tinyglobby": "^0.2.17",
-    "vue": "^3.5.39",
+    "vue": "^3.5.40",
     "webpack-merge": "^6.0.1",
     "@quasar/extras": "2.0.2"
   },

package/src/components/btn/QBtn.js

@@ -290,7 +290,7 @@ export default createComponent({
         blurTarget !== document.activeElement
       ) {
         blurTarget.setAttribute('tabindex', -1)
-        blurTarget.focus()
+        blurTarget.focus({ preventScroll: true })
       }
 
       if (touchTarget === rootRef.value) {

package/src/components/carousel/QCarousel.js

@@ -89,6 +89,7 @@ export default createComponent({
 
     const {
       updatePanelsList,
+      updatePanelIndex,
       getPanelContent,
       panelDirectives,
       goToPanel,
@@ -322,6 +323,7 @@ export default createComponent({
 
     return () => {
       panelsLen = updatePanelsList(slots)
+      updatePanelIndex()
 
       return h(
         'div',

package/src/components/chip/QChip.js

@@ -15,6 +15,10 @@ import { createComponent } from '../../utils/private.create/create.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import { hDir, hMergeSlotSafely } from '../../utils/private.render/render.js'
 
+function preventSpace(e) {
+  if (e.keyCode === 32) stopAndPrevent(e)
+}
+
 export const defaultSizes = {
   xs: 8,
   sm: 10,
@@ -116,7 +120,11 @@ export default createComponent({
     const attributes = computed(() => {
       const chip = props.disable
         ? { tabindex: -1, 'aria-disabled': 'true' }
-        : { tabindex: props.tabindex || 0 }
+        : {
+            tabindex: props.tabindex || 0,
+            role: 'button',
+            'aria-pressed': props.selected ? 'true' : 'false'
+          }
 
       const remove = {
         ...chip,
@@ -129,7 +137,10 @@ export default createComponent({
     })
 
     function onKeyup(e) {
-      if (e.keyCode === 13 /* ENTER */) onClick(e)
+      if ([13, 32].includes(e.keyCode)) {
+        onClick(e)
+        stopAndPrevent(e)
+      }
     }
 
     function onClick(e) {
@@ -140,7 +151,7 @@ export default createComponent({
     }
 
     function onRemove(e) {
-      if (e.keyCode === void 0 || e.keyCode === 13) {
+      if (e.keyCode === void 0 || [13, 32].includes(e.keyCode)) {
         stopAndPrevent(e)
         if (!props.disable) {
           emit('update:modelValue', false)
@@ -196,6 +207,7 @@ export default createComponent({
             name: removeIcon.value,
             ...attributes.value.remove,
             onClick: onRemove,
+            onKeydown: preventSpace,
             onKeyup: onRemove
           })
         )
@@ -213,7 +225,11 @@ export default createComponent({
       }
 
       if (isClickable.value) {
-        Object.assign(data, attributes.value.chip, { onClick, onKeyup })
+        Object.assign(data, attributes.value.chip, {
+          onClick,
+          onKeydown: preventSpace,
+          onKeyup
+        })
       }
 
       return hDir(

package/src/components/date/QDate.js

@@ -14,6 +14,7 @@ import useDark, {
   useDarkProps
 } from '../../composables/private.use-dark/use-dark.js'
 import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
+import useHydration from '../../composables/use-hydration/use-hydration.js'
 import {
   useFormAttrs,
   useFormInject,
@@ -124,6 +125,7 @@ export default createComponent({
 
     const isDark = useDark(props, $q)
     const { getCache } = useRenderCache()
+    const { isHydrated } = useHydration()
     const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(
       props,
       $q
@@ -736,6 +738,7 @@ export default createComponent({
       }
 
       if (
+        isHydrated.value &&
         viewModel.value.year === today.value.year &&
         viewModel.value.month === today.value.month
       ) {
@@ -1478,7 +1481,8 @@ export default createComponent({
       ],
 
       Months() {
-        const currentYear = viewModel.value.year === today.value.year
+        const currentYear =
+          isHydrated.value && viewModel.value.year === today.value.year
         const isDisabled = month =>
           (minNav.value !== null &&
             viewModel.value.year === minNav.value.year &&
@@ -1565,7 +1569,10 @@ export default createComponent({
               [
                 h(QBtn, {
                   key: 'yr' + i,
-                  class: today.value.year === i ? 'q-date__today' : null,
+                  class:
+                    isHydrated.value && today.value.year === i
+                      ? 'q-date__today'
+                      : null,
                   flat: !active,
                   label: i,
                   dense: true,

package/src/components/dialog/QDialog.js

@@ -138,6 +138,7 @@ export default createComponent({
       hideOnRouteChange,
       handleShow,
       handleHide,
+      handleRouteChange,
       processOnMount: true
     })
 
@@ -253,13 +254,15 @@ export default createComponent({
       hidePortal()
 
       if (refocusTarget !== null) {
-        ;(
+        const target =
           (evt?.type.indexOf('key') === 0
             ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
             : void 0) || refocusTarget
-        ).focus()
 
         refocusTarget = null
+        addFocusFn(() => {
+          if (target.isConnected) target.focus()
+        })
       }
 
       // should removeTimeout() if this gets removed
@@ -270,6 +273,10 @@ export default createComponent({
       }, props.transitionDuration)
     }
 
+    function handleRouteChange() {
+      refocusTarget = null
+    }
+
     function focus(selector) {
       addFocusFn(() => {
         let node = innerRef.value

package/src/components/editor/QEditor.js

@@ -21,6 +21,8 @@ import useFullscreen, {
 } from '../../composables/private.use-fullscreen/use-fullscreen.js'
 import useSplitAttrs from '../../composables/use-split-attrs/use-split-attrs.js'
 
+import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
+
 import { createComponent } from '../../utils/private.create/create.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import extend from '../../utils/extend/extend.js'
@@ -113,8 +115,12 @@ export default createComponent({
 
     const editable = computed(() => !props.readonly && !props.disable)
 
-    let defaultFont, offsetBottom
+    let defaultFont,
+      offsetBottom,
+      refreshToolbarTimer = null
     let lastEmit = props.modelValue
+    const renderInitialContent =
+      __QUASAR_SSR_SERVER__ || isRuntimeSsrPreHydration.value
 
     if (!__QUASAR_SSR_SERVER__) {
       document.execCommand(
@@ -648,7 +654,12 @@ export default createComponent({
     }
 
     function refreshToolbar() {
-      setTimeout(() => {
+      if (refreshToolbarTimer !== null) {
+        clearTimeout(refreshToolbarTimer)
+      }
+
+      refreshToolbarTimer = setTimeout(() => {
+        refreshToolbarTimer = null
         editLinkUrl.value = null
         proxy.$forceUpdate()
       }, 1)
@@ -673,6 +684,10 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
+      if (refreshToolbarTimer !== null) {
+        clearTimeout(refreshToolbarTimer)
+      }
+
       document.removeEventListener('selectionchange', onSelectionchange)
     })
 
@@ -745,7 +760,7 @@ export default createComponent({
             class: innerClass.value,
             contenteditable: editable.value,
             placeholder: props.placeholder,
-            ...(__QUASAR_SSR_SERVER__ ? { innerHTML: props.modelValue } : {}),
+            ...(renderInitialContent ? { innerHTML: props.modelValue } : {}),
             ...splitAttrs.listeners.value,
             onInput,
             onKeydown,

package/src/components/expansion-item/QExpansionItem.js

@@ -33,6 +33,10 @@ import { hSlot } from '../../utils/private.render/render.js'
 import uid from '../../utils/uid/uid.js'
 
 const itemGroups = shallowReactive({})
+
+function preventSpace(e) {
+  if (e.keyCode === 32) stopAndPrevent(e)
+}
 const LINK_PROPS = Object.keys(useRouterLinkProps)
 
 export default createComponent({
@@ -176,7 +180,7 @@ export default createComponent({
     }
 
     function toggleIconKeyboard(e) {
-      if (e.keyCode === 13) toggleIcon(e, true)
+      if ([13, 32].includes(e.keyCode)) toggleIcon(e, true)
     }
 
     function toggleIcon(e, keyboard) {
@@ -259,6 +263,7 @@ export default createComponent({
           tabindex: 0,
           ...toggleAriaAttrs.value,
           onClick: toggleIcon,
+          onKeydown: preventSpace,
           onKeyup: toggleIconKeyboard
         })
 

package/src/components/fab/QFab.sass

@@ -100,20 +100,22 @@
     .q-btn
       margin: 5px
 
+    // physical direction, not text-based: don't let rtlcss mirror it
     &--right
-      transform-origin: 0 50%
-      transform: scale(.4) translateX(-62px)
+      transform-origin: 0 50% #{"/* rtl:ignore */"}
+      transform: scale(.4) translateX(-62px) #{"/* rtl:ignore */"}
       height: 56px
-      left: 100%
-      margin-left: 9px
+      left: 100% #{"/* rtl:ignore */"}
+      margin-left: 9px #{"/* rtl:ignore */"}
+      flex-direction: row #{"/* rtl:row-reverse */"}
 
     &--left
-      transform-origin: 100% 50%
-      transform: scale(.4) translateX(62px)
+      transform-origin: 100% 50% #{"/* rtl:ignore */"}
+      transform: scale(.4) translateX(62px) #{"/* rtl:ignore */"}
       height: 56px
-      right: 100%
-      margin-right: 9px
-      flex-direction: row-reverse
+      right: 100% #{"/* rtl:ignore */"}
+      margin-right: 9px #{"/* rtl:ignore */"}
+      flex-direction: row-reverse #{"/* rtl:row */"}
 
     &--up
       transform-origin: 50% 100%

package/src/components/input/QInput.js

@@ -42,6 +42,7 @@ export default createComponent({
     modelValue: __QUASAR_SSR_SERVER__
       ? {} // SSR does not know about FileList
       : [String, Number, FileList],
+    modelModifiers: Object,
 
     shadowText: String,
 
@@ -179,6 +180,13 @@ export default createComponent({
     watch(
       () => props.modelValue,
       v => {
+        if (emitTimer !== null) {
+          cancelPendingValueEmission()
+          typedNumber = false
+          stopValueWatcher = false
+          delete temp.value
+        }
+
         if (hasMask.value) {
           if (stopValueWatcher) {
             stopValueWatcher = false
@@ -196,6 +204,14 @@ export default createComponent({
               delete temp.value
             }
           }
+
+          if (
+            props.modelModifiers?.trim === true &&
+            Object.hasOwn(temp, 'value') &&
+            (typeof temp.value !== 'string' || temp.value.trim() !== v)
+          ) {
+            delete temp.value
+          }
         }
 
         // textarea only
@@ -268,6 +284,10 @@ export default createComponent({
       if (hasMask.value) {
         updateMaskValue(val, false, e.inputType)
       } else {
+        if (props.modelModifiers?.trim === true) {
+          temp.value = val
+        }
+
         emitValue(val)
 
         if (isTypeText.value && e.target === document.activeElement) {
@@ -300,7 +320,11 @@ export default createComponent({
       emitValueFn = () => {
         emitTimer = null
 
-        if (props.type !== 'number' && Object.hasOwn(temp, 'value')) {
+        if (
+          props.type !== 'number' &&
+          (props.modelModifiers?.trim !== true || hasMask.value) &&
+          Object.hasOwn(temp, 'value')
+        ) {
           delete temp.value
         }
 
@@ -332,6 +356,22 @@ export default createComponent({
       }
     }
 
+    function cancelPendingValueEmission() {
+      if (emitTimer !== null) {
+        clearTimeout(emitTimer)
+        emitTimer = null
+      }
+
+      emitValueFn = void 0
+    }
+
+    function onClear() {
+      cancelPendingValueEmission()
+      typedNumber = false
+      stopValueWatcher = false
+      delete temp.value
+    }
+
     // textarea only
     function adjustHeight() {
       requestAnimationFrame(() => {
@@ -445,6 +485,7 @@ export default createComponent({
       inputRef,
 
       emitValue,
+      onClear,
 
       hasValue,
 

package/src/components/input/QInput.json

@@ -17,6 +17,13 @@
       "examples": ["# v-model=\"myText\""]
     },
 
+    "model-modifiers": {
+      "type": "Object",
+      "desc": "Modifiers supplied by Vue for the component's v-model binding",
+      "examples": ["{ trim: true }"],
+      "internal": true
+    },
+
     "shadow-text": {
       "type": "String",
       "desc": "Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file",

package/src/components/input/use-mask.js

@@ -148,6 +148,14 @@ export default function useMask(props, emit, emitValue, inputRef) {
     }
   )
 
+  watch(
+    () => props.maskTokens,
+    () => {
+      if (hasMask.value) updateMaskValue(innerValue.value, true)
+    },
+    { deep: true }
+  )
+
   function getInitialMaskedValue() {
     updateMaskInternals()
 
@@ -311,8 +319,8 @@ export default function useMask(props, emit, emitValue, inputRef) {
 
   function updateMaskValue(rawVal, updateMaskInternalsFlag, inputType) {
     const inp = inputRef.value,
-      end = inp.selectionEnd,
-      endReverse = inp.value.length - end,
+      end = inp?.selectionEnd ?? 0,
+      endReverse = inp === null ? 0 : inp.value.length - end,
       unmasked = unmaskValue(rawVal)
 
     // Update here so unmask uses the original fillChar
@@ -323,11 +331,11 @@ export default function useMask(props, emit, emitValue, inputRef) {
       changed = innerValue.value !== masked
 
     // We want to avoid "flickering" so we set value immediately
-    if (inp.value !== masked) inp.value = masked
+    if (inp !== null && inp.value !== masked) inp.value = masked
 
     if (changed) innerValue.value = masked
 
-    if (document.activeElement === inp) {
+    if (inp !== null && document.activeElement === inp) {
       nextTick(() => {
         if (masked === maskReplaced) {
           const cursor = props.reverseFillMask ? maskReplaced.length : 0

package/src/components/item/QItem.js

@@ -118,6 +118,10 @@ export default createComponent({
       emit('keyup', e)
     }
 
+    function onKeydown(e) {
+      if (isClickable.value && e.keyCode === 32) stopAndPrevent(e)
+    }
+
     function getContent() {
       const child = hUniqueSlot(slots.default, [])
 
@@ -139,8 +143,13 @@ export default createComponent({
         ref: rootRef,
         class: classes.value,
         style: style.value,
-        role: 'listitem',
+        role: hasLink.value
+          ? void 0
+          : isClickable.value
+            ? 'button'
+            : 'listitem',
         onClick,
+        onKeydown,
         onKeyup
       }
 

package/src/components/linear-progress/QLinearProgress.js

@@ -18,11 +18,9 @@ const defaultSizes = {
   xl: 14
 }
 
-function width(val, reverse, $q) {
+function width(val) {
   return {
-    transform: reverse
-      ? `translateX(${$q.lang.rtl ? '-' : ''}100%) scale3d(${-val},1,1)`
-      : `scale3d(${val},1,1)`
+    transform: `scale3d(${val},1,1)`
   }
 }
 
@@ -62,7 +60,6 @@ export default createComponent({
     const sizeStyle = useSize(props, defaultSizes)
 
     const motion = computed(() => props.indeterminate || props.query)
-    const widthReverse = computed(() => props.reverse !== props.query)
     const style = computed(() => ({
       ...(sizeStyle.value !== null ? sizeStyle.value : {}),
       '--q-linear-progress-speed': `${props.animationSpeed}ms`
@@ -77,11 +74,7 @@ export default createComponent({
     )
 
     const trackStyle = computed(() =>
-      width(
-        props.buffer !== void 0 ? props.buffer : 1,
-        widthReverse.value,
-        proxy.$q
-      )
+      width(props.buffer !== void 0 ? props.buffer : 1)
     )
     const transitionSuffix = computed(
       () => `with${props.instantFeedback ? 'out' : ''}-transition`
@@ -96,7 +89,7 @@ export default createComponent({
     )
 
     const modelStyle = computed(() =>
-      width(motion.value ? 1 : props.value, widthReverse.value, proxy.$q)
+      width(motion.value ? 1 : props.value)
     )
     const modelClass = computed(
       () =>

package/src/components/linear-progress/QLinearProgress.json

@@ -34,7 +34,7 @@
 
     "reverse": {
       "type": "Boolean",
-      "desc": "Reverse direction of progress",
+      "desc": "Reverse direction of progress (has no effect for query behaviour)",
       "category": "behavior"
     },
 

package/src/components/linear-progress/QLinearProgress.sass

@@ -16,8 +16,13 @@
 
   &--reverse
     .q-linear-progress
-      &__model, &__track
-        transform-origin: 0 100%
+      &__model--determinate, &__track
+        transform-origin: 100% 0
+
+      // motion modes span the full width, so anchoring cannot reverse them: mirror them in place
+      &__model--indeterminate, &__model--query
+        transform-origin: 50% 0
+        scale: -1 1
 
   &__model
 

package/src/components/menu/QMenu.js

@@ -137,6 +137,7 @@ export default createComponent({
       canShow,
       handleShow,
       handleHide,
+      handleRouteChange,
       hideOnRouteChange,
       processOnMount: true
     })
@@ -297,13 +298,15 @@ export default createComponent({
           // menu was not closed from a mouse or touch clickOutside
           !evt.qClickOutside)
       ) {
-        ;(
+        const target =
           (evt?.type.indexOf('key') === 0
             ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
             : void 0) || refocusTarget
-        ).focus()
 
         refocusTarget = null
+        addFocusFn(() => {
+          if (target.isConnected) target.focus()
+        })
       }
 
       // should removeTimeout() if this gets removed
@@ -313,6 +316,10 @@ export default createComponent({
       }, props.transitionDuration)
     }
 
+    function handleRouteChange() {
+      refocusTarget = null
+    }
+
     function anchorCleanup(hiding) {
       absoluteOffset = void 0
 

package/src/components/range/QRange.js

@@ -191,6 +191,7 @@ export default createComponent({
 
     const maxEvents = computed(() => getEvents('max'))
     const getMaxThumb = methods.getThumbRenderFn({
+      injectFormInput: false,
       focusValue: 'max',
       getNodeData: () => ({
         ...maxEvents.value,
@@ -349,7 +350,7 @@ export default createComponent({
       // If either of the values to be emitted are null, set them to the defaults the user has entered.
       model.value =
         model.value.min === null || model.value.max === null
-          ? { min: pos.min || props.min, max: pos.max || props.max }
+          ? { min: pos.min ?? props.min, max: pos.max ?? props.max }
           : { min: pos.min, max: pos.max }
 
       if (!props.snap || props.step === 0) {