quasar 2.18.7 → 2.19.0

package/package.json

@@ -1,12 +1,38 @@
 {
   "name": "quasar",
-  "version": "2.18.7",
+  "version": "2.19.0",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
-  "type": "module",
-  "module": "dist/quasar.client.js",
-  "unpkg": "dist/quasar.umd.prod.js",
-  "jsdelivr": "dist/quasar.umd.prod.js",
-  "typings": "dist/types/index.d.ts",
+  "keywords": [
+    "desktop",
+    "electron",
+    "js",
+    "phone",
+    "pwa",
+    "quasar",
+    "spa",
+    "tablet",
+    "vue",
+    "vuejs",
+    "website"
+  ],
+  "homepage": "https://quasar.dev",
+  "bugs": {
+    "url": "https://github.com/quasarframework/quasar/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Razvan Stoenescu",
+    "email": "razvan.stoenescu@gmail.com",
+    "url": "https://quasar.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quasarframework/quasar.git"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://donate.quasar.dev"
+  },
   "files": [
     "dist",
     "lang",
@@ -14,6 +40,11 @@
     "src",
     "wrappers"
   ],
+  "type": "module",
+  "module": "dist/quasar.client.js",
+  "typings": "dist/types/index.d.ts",
+  "unpkg": "dist/quasar.umd.prod.js",
+  "jsdelivr": "dist/quasar.umd.prod.js",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -27,78 +58,33 @@
     },
     "./*": "./*"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/quasarframework/quasar.git"
-  },
-  "keywords": [
-    "vuejs",
-    "vue",
-    "quasar",
-    "js",
-    "phone",
-    "tablet",
-    "desktop",
-    "spa",
-    "pwa",
-    "website",
-    "electron"
-  ],
-  "author": {
-    "name": "Razvan Stoenescu",
-    "email": "razvan.stoenescu@gmail.com",
-    "url": "https://quasar.dev"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/quasarframework/quasar/issues"
-  },
-  "funding": {
-    "type": "github",
-    "url": "https://donate.quasar.dev"
-  },
-  "homepage": "https://quasar.dev",
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
     "cli-highlight": "^2.1.11",
-    "cross-env": "^7.0.3",
-    "cssnano": "^7.0.6",
-    "diff": "^5.2.0",
-    "esbuild": "^0.25.0",
-    "eslint": "^9.37.0",
-    "fs-extra": "^11.2.0",
+    "cross-env": "^10.1.0",
+    "diff": "^8.0.3",
+    "fs-extra": "^11.3.4",
     "kolorist": "^1.8.0",
+    "lightningcss": "^1.32.0",
     "open": "^10.1.0",
     "postcss-rtlcss": "^5.4.0",
-    "prettier": "^3.3.3",
-    "sass-embedded": "^1.93.2",
+    "rolldown": "1.0.0-rc.10",
+    "sass-embedded": "^1.98.0",
     "table": "^6.8.2",
     "tinyglobby": "^0.2.10",
     "typescript": "^5.6.2",
     "vue": "^3.5.30",
-    "eslint-config-quasar": "0.0.3",
     "@quasar/extras": "1.17.0"
   },
-  "vetur": {
-    "tags": "dist/vetur/quasar-tags.json",
-    "attributes": "dist/vetur/quasar-attributes.json"
-  },
-  "web-types": "dist/web-types/web-types.json",
-  "browserslist": [
-    "last 10 Chrome versions",
-    "last 10 Firefox versions",
-    "last 10 Edge versions",
-    "last 10 Safari versions",
-    "last 10 Android versions",
-    "last 10 ChromeAndroid versions",
-    "last 10 FirefoxAndroid versions",
-    "last 10 iOS versions"
-  ],
   "engines": {
     "node": ">= 10.18.1",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   },
+  "vetur": {
+    "tags": "dist/vetur/quasar-tags.json",
+    "attributes": "dist/vetur/quasar-attributes.json"
+  },
+  "web-types": "dist/web-types/web-types.json",
   "scripts": {
     "clean": "node build/script.clean.js",
     "build": "node build/script.build.js",
@@ -108,8 +94,8 @@
     "dev:build:ssr": "cd ./playground && quasar build -m ssr && cd ..",
     "dev:umd": "node build/script.test-umd.js",
     "dev:quploader": "cd ./playground/upload-server && pnpm i && cd ../.. && node playground/upload-server/server.js",
-    "lint": "eslint --cache --fix",
-    "format:types": "prettier --write \"types/**/*.{d.ts,ts,json}\"",
+    "lint": "oxfmt && oxlint --fix",
+    "lint:check": "oxfmt --check && oxlint",
     "test": "pnpm --filter quasar-ui-test test",
     "test:watch": "pnpm --filter quasar-ui-test test:watch",
     "test:watch:ui": "pnpm --filter quasar-ui-test test:watch:ui",

package/src/api.extends.json

@@ -16,7 +16,7 @@
       "type": "String",
       "tsType": "NamedColor",
       "desc": "Color name for component from the Quasar Color Palette",
-      "examples": [ "'primary'", "'teal'", "'teal-10'" ],
+      "examples": ["'primary'", "'teal'", "'teal-10'"],
       "category": "style"
     },
 
@@ -24,7 +24,7 @@
       "type": "String",
       "tsType": "NamedColor",
       "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
-      "examples": [ "'primary'", "'teal'", "'teal-10'" ],
+      "examples": ["'primary'", "'teal'", "'teal-10'"],
       "category": "style"
     },
 
@@ -37,12 +37,12 @@
     "size": {
       "type": "String",
       "desc": "Size in CSS units, including unit name",
-      "examples": [ "'16px'", "'2rem'" ],
+      "examples": ["'16px'", "'2rem'"],
       "category": "style"
     },
 
     "dark": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Notify the component that the background is a dark color",
       "category": "style"
@@ -85,23 +85,23 @@
     },
 
     "tabindex": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Tabindex HTML attribute value",
-      "examples": [ "100", "'0'" ],
+      "examples": ["100", "'0'"],
       "category": "general"
     },
 
     "transition": {
       "type": "String",
       "desc": "One of Quasar's embedded transitions",
-      "examples": [ "'fade'", "'slide-down'" ],
+      "examples": ["'fade'", "'slide-down'"],
       "category": "transition"
     },
 
     "animation-speed": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Animation speed (in milliseconds, without unit)",
-      "examples": [ "500", "'1200'" ],
+      "examples": ["500", "'1200'"],
       "category": "style"
     },
 
@@ -125,7 +125,7 @@
     },
 
     "scroll-target": {
-      "type": [ "Element", "String" ],
+      "type": ["Element", "String"],
       "desc": "CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one",
       "examples": [
         ".scroll-target-class",
@@ -137,10 +137,13 @@
     },
 
     "ripple": {
-      "type": [ "Boolean", "Object" ],
+      "type": ["Boolean", "Object"],
       "desc": "Configure material ripple (disable it by setting it to 'false' or supply a config object)",
       "default": "true",
-      "examples": [ "false", "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
+      "examples": [
+        "false",
+        "{ early: true, center: true, color: 'teal', keyCodes: [] }"
+      ],
       "category": "style"
     },
 

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

@@ -1,66 +1,81 @@
-import { h, ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  getCurrentInstance
+} from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { between } from '../../utils/format/format.js'
 
-const
-  xhr = __QUASAR_SSR_SERVER__ ? null : XMLHttpRequest,
+const xhr = __QUASAR_SSR_SERVER__ ? null : XMLHttpRequest,
   open = __QUASAR_SSR_SERVER__ ? null : xhr.prototype.open,
-  positionValues = [ 'top', 'right', 'bottom', 'left' ]
+  positionValues = ['top', 'right', 'bottom', 'left']
 
 let stack = []
 let highjackCount = 0
 
-function translate ({ p, pos, active, horiz, reverse, dir }) {
-  let x = 1, y = 1
+function translate({ p, pos, active, horiz, reverse, dir }) {
+  let x = 1,
+    y = 1
 
   if (horiz === true) {
-    if (reverse === true) { x = -1 }
-    if (pos === 'bottom') { y = -1 }
-    return { transform: `translate3d(${ x * (p - 100) }%,${ active ? 0 : y * -200 }%,0)` }
+    if (reverse === true) {
+      x = -1
+    }
+    if (pos === 'bottom') {
+      y = -1
+    }
+    return {
+      transform: `translate3d(${x * (p - 100)}%,${active ? 0 : y * -200}%,0)`
+    }
   }
 
-  if (reverse === true) { y = -1 }
-  if (pos === 'right') { x = -1 }
-  return { transform: `translate3d(${ active ? 0 : dir * x * -200 }%,${ y * (p - 100) }%,0)` }
+  if (reverse === true) {
+    y = -1
+  }
+  if (pos === 'right') {
+    x = -1
+  }
+  return {
+    transform: `translate3d(${active ? 0 : dir * x * -200}%,${y * (p - 100)}%,0)`
+  }
 }
 
-function inc (p, amount) {
+function inc(p, amount) {
   if (typeof amount !== 'number') {
     if (p < 25) {
       amount = Math.random() * 3 + 3
-    }
-    else if (p < 65) {
+    } else if (p < 65) {
       amount = Math.random() * 3
-    }
-    else if (p < 85) {
+    } else if (p < 85) {
       amount = Math.random() * 2
-    }
-    else if (p < 99) {
+    } else if (p < 99) {
       amount = 0.6
-    }
-    else {
+    } else {
       amount = 0
     }
   }
   return between(p + amount, 0, 100)
 }
 
-function highjackAjax (stackEntry) {
+function highjackAjax(stackEntry) {
   highjackCount++
 
   stack.push(stackEntry)
 
   if (highjackCount > 1) return
 
-  xhr.prototype.open = function (_, url) {
+  xhr.prototype.open = function qOpen(_, url) {
     const stopStack = []
 
     const loadStart = () => {
       stack.forEach(entry => {
         if (
-          entry.hijackFilter.value === null
-          || (entry.hijackFilter.value(url) === true)
+          entry.hijackFilter.value === null ||
+          entry.hijackFilter.value(url) === true
         ) {
           entry.start()
           stopStack.push(entry.stop)
@@ -69,7 +84,9 @@ function highjackAjax (stackEntry) {
     }
 
     const loadEnd = () => {
-      stopStack.forEach(stop => { stop() })
+      stopStack.forEach(stop => {
+        stop()
+      })
     }
 
     this.addEventListener('loadstart', loadStart, { once: true })
@@ -79,7 +96,7 @@ function highjackAjax (stackEntry) {
   }
 }
 
-function restoreAjax (start) {
+function restoreAjax(start) {
   stack = stack.filter(entry => entry.start !== start)
 
   highjackCount = Math.max(0, highjackCount - 1)
@@ -110,25 +127,32 @@ export default createComponent({
     hijackFilter: Function
   },
 
-  emits: [ 'start', 'stop' ],
+  emits: ['start', 'stop'],
 
-  setup (props, { emit }) {
+  setup(props, { emit }) {
     const { proxy } = getCurrentInstance()
 
     const progress = ref(0)
     const onScreen = ref(false)
     const animate = ref(true)
 
-    let sessions = 0, timer = null, speed
+    let sessions = 0,
+      timer = null,
+      speed
 
-    const classes = computed(() =>
-      `q-loading-bar q-loading-bar--${ props.position }`
-      + (props.color !== void 0 ? ` bg-${ props.color }` : '')
-      + (animate.value === true ? '' : ' no-transition')
+    const classes = computed(
+      () =>
+        `q-loading-bar q-loading-bar--${props.position}` +
+        (props.color !== void 0 ? ` bg-${props.color}` : '') +
+        (animate.value === true ? '' : ' no-transition')
     )
 
-    const horizontal = computed(() => props.position === 'top' || props.position === 'bottom')
-    const sizeProp = computed(() => (horizontal.value === true ? 'height' : 'width'))
+    const horizontal = computed(
+      () => props.position === 'top' || props.position === 'bottom'
+    )
+    const sizeProp = computed(() =>
+      horizontal.value === true ? 'height' : 'width'
+    )
 
     const style = computed(() => {
       const active = onScreen.value
@@ -138,19 +162,21 @@ export default createComponent({
         pos: props.position,
         active,
         horiz: horizontal.value,
-        reverse: proxy.$q.lang.rtl === true && [ 'top', 'bottom' ].includes(props.position)
-          ? props.reverse === false
-          : props.reverse,
+        reverse:
+          proxy.$q.lang.rtl === true &&
+          ['top', 'bottom'].includes(props.position)
+            ? props.reverse === false
+            : props.reverse,
         dir: proxy.$q.lang.rtl === true ? -1 : 1
       })
 
-      obj[ sizeProp.value ] = props.size
+      obj[sizeProp.value] = props.size
       obj.opacity = active ? 1 : 0
 
       return obj
     })
 
-    const attributes = computed(() => (
+    const attributes = computed(() =>
       onScreen.value === true
         ? {
             role: 'progressbar',
@@ -159,9 +185,9 @@ export default createComponent({
             'aria-valuenow': progress.value
           }
         : { 'aria-hidden': 'true' }
-    ))
+    )
 
-    function start (newSpeed = 300) {
+    function start(newSpeed = 300) {
       const oldSpeed = speed
       speed = Math.max(0, newSpeed) || 0
 
@@ -170,8 +196,7 @@ export default createComponent({
       if (sessions > 1) {
         if (oldSpeed === 0 && newSpeed > 0) {
           planNextStep()
-        }
-        else if (timer !== null && oldSpeed > 0 && newSpeed <= 0) {
+        } else if (timer !== null && oldSpeed > 0 && newSpeed <= 0) {
           clearTimeout(timer)
           timer = null
         }
@@ -179,7 +204,7 @@ export default createComponent({
         return sessions
       }
 
-      timer !== null && clearTimeout(timer)
+      if (timer !== null) clearTimeout(timer)
       emit('start')
 
       progress.value = 0
@@ -192,14 +217,15 @@ export default createComponent({
        * -- and we are changing them below, which would cause an infinite loop
        */
 
-      timer = setTimeout(() => {
-        timer = null
-        animate.value = true
-        newSpeed > 0 && planNextStep()
-        // eslint-disable-next-line vue/no-ref-as-operand
-      }, onScreen._value === true ? 500 : 1)
+      timer = setTimeout(
+        () => {
+          timer = null
+          animate.value = true
+          if (newSpeed > 0) planNextStep()
+        },
+        onScreen._value === true ? 500 : 1
+      )
 
-      // eslint-disable-next-line vue/no-ref-as-operand
       if (onScreen._value !== true) {
         onScreen.value = true
         animate.value = false
@@ -208,7 +234,7 @@ export default createComponent({
       return sessions
     }
 
-    function increment (amount) {
+    function increment(amount) {
       if (sessions > 0) {
         progress.value = inc(progress.value, amount)
       }
@@ -216,7 +242,7 @@ export default createComponent({
       return sessions
     }
 
-    function stop () {
+    function stop() {
       sessions = Math.max(0, sessions - 1)
       if (sessions > 0) {
         return sessions
@@ -240,15 +266,14 @@ export default createComponent({
 
       if (progress.value === 0) {
         timer = setTimeout(end, 1)
-      }
-      else {
+      } else {
         end()
       }
 
       return sessions
     }
 
-    function planNextStep () {
+    function planNextStep() {
       if (progress.value < 100) {
         timer = setTimeout(() => {
           timer = null
@@ -272,17 +297,18 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      timer !== null && clearTimeout(timer)
-      hijacked === true && restoreAjax(start)
+      if (timer !== null) clearTimeout(timer)
+      if (hijacked === true) restoreAjax(start)
     })
 
     // expose public methods
     Object.assign(proxy, { start, stop, increment })
 
-    return () => h('div', {
-      class: classes.value,
-      style: style.value,
-      ...attributes.value
-    })
+    return () =>
+      h('div', {
+        class: classes.value,
+        style: style.value,
+        ...attributes.value
+      })
   }
 })

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

@@ -8,7 +8,7 @@
       "type": "String",
       "desc": "Position within window of where QAjaxBar should be displayed",
       "default": "'top'",
-      "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
+      "values": ["'top'", "'right'", "'bottom'", "'left'"],
       "category": "style"
     },
 
@@ -40,7 +40,7 @@
         "url": {
           "type": "String",
           "desc": "The URL being triggered",
-          "examples": [ "'https://some.url/path'" ]
+          "examples": ["'https://some.url/path'"]
         }
       },
       "returns": {

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

@@ -1,5 +1,3 @@
 import QAjaxBar from './QAjaxBar.js'
 
-export {
-  QAjaxBar
-}
+export { QAjaxBar }

package/src/components/avatar/QAvatar.js

@@ -2,7 +2,9 @@ import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
+import useSize, {
+  useSizeProps
+} from '../../composables/private.use-size/use-size.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hMergeSlotSafely } from '../../utils/private.render/render.js'
@@ -23,40 +25,46 @@ export default createComponent({
     rounded: Boolean
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const sizeStyle = useSize(props)
 
-    const classes = computed(() =>
-      'q-avatar'
-      + (props.color ? ` bg-${ props.color }` : '')
-      + (props.textColor ? ` text-${ props.textColor } q-chip--colored` : '')
-      + (
-        props.square === true
+    const classes = computed(
+      () =>
+        'q-avatar' +
+        (props.color ? ` bg-${props.color}` : '') +
+        (props.textColor ? ` text-${props.textColor} q-chip--colored` : '') +
+        (props.square === true
           ? ' q-avatar--square'
-          : (props.rounded === true ? ' rounded-borders' : '')
-      )
+          : props.rounded === true
+            ? ' rounded-borders'
+            : '')
     )
 
-    const contentStyle = computed(() => (
-      props.fontSize
-        ? { fontSize: props.fontSize }
-        : null
-    ))
+    const contentStyle = computed(() =>
+      props.fontSize ? { fontSize: props.fontSize } : null
+    )
 
     return () => {
-      const icon = props.icon !== void 0
-        ? [ h(QIcon, { name: props.icon }) ]
-        : void 0
-
-      return h('div', {
-        class: classes.value,
-        style: sizeStyle.value
-      }, [
-        h('div', {
-          class: 'q-avatar__content row flex-center overflow-hidden',
-          style: contentStyle.value
-        }, hMergeSlotSafely(slots.default, icon))
-      ])
+      const icon =
+        props.icon !== void 0 ? [h(QIcon, { name: props.icon })] : void 0
+
+      return h(
+        'div',
+        {
+          class: classes.value,
+          style: sizeStyle.value
+        },
+        [
+          h(
+            'div',
+            {
+              class: 'q-avatar__content row flex-center overflow-hidden',
+              style: contentStyle.value
+            },
+            hMergeSlotSafely(slots.default, icon)
+          )
+        ]
+      )
     }
   }
 })

package/src/components/avatar/QAvatar.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-size/use-size" ],
+  "mixins": ["composables/private.use-size/use-size"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/avatar"
@@ -9,7 +9,7 @@
     "font-size": {
       "type": "String",
       "desc": "The size in CSS units, including unit name, of the content (icon, text)",
-      "examples": [ "'18px'", "'2rem'" ],
+      "examples": ["'18px'", "'2rem'"],
       "category": "style"
     },