quasar 2.16.10 → 2.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.16.10",
+  "version": "2.17.0",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "type": "module",
   "module": "dist/quasar.client.js",
@@ -59,23 +59,23 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "cli-highlight": "^2.1.11",
     "cross-env": "^7.0.3",
-    "cssnano": "^7.0.4",
+    "cssnano": "^7.0.6",
     "diff": "^5.2.0",
-    "esbuild": "^0.23.0",
+    "esbuild": "^0.23.1",
     "eslint": "^8.57.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "kolorist": "^1.8.0",
     "open": "^10.1.0",
-    "postcss-rtlcss": "^5.3.0",
-    "prettier": "^3.3.2",
-    "sass-embedded": "^1.77.5",
+    "postcss-rtlcss": "^5.4.0",
+    "prettier": "^3.3.3",
+    "sass-embedded": "^1.78.0",
     "table": "^6.8.2",
-    "typescript": "^5.4.5",
-    "vue": "^3.4.31",
+    "typescript": "^5.6.2",
+    "vue": "^3.5.5",
     "@quasar/extras": "1.16.12",
     "eslint-config-quasar": "0.0.1"
   },

package/src/components/checkbox/QCheckbox.js

@@ -5,7 +5,7 @@ import QIcon from '../icon/QIcon.js'
 import { createComponent } from '../../utils/private.create/create.js'
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
 
-const bgNode = h('div', {
+const createBgNode = () => h('div', {
   key: 'svg',
   class: 'q-checkbox__bg absolute'
 }, [
@@ -33,6 +33,8 @@ export default createComponent({
   emits: useCheckboxEmits,
 
   setup (props) {
+    const bgNode = createBgNode()
+
     function getInner (isTrue, isIndeterminate) {
       const icon = computed(() =>
         (isTrue.value === true

package/src/components/icon/QIcon.js

@@ -42,7 +42,7 @@ const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faRE = /^(fa-(sharp|solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /
+const faRE = /^(fa-(classic|sharp|solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /
 
 export default createComponent({
   name: 'QIcon',

package/src/components/menu/QMenu.sass

@@ -1,7 +1,8 @@
 .q-menu
   position: fixed !important
   display: inline-block
-  max-width: $menu-max-width
+  max-width: $menu-max-width // required by the position-engine
+  max-height: $menu-max-height // required by the position-engine
 
   box-shadow: $menu-box-shadow
   background: $menu-background
@@ -9,7 +10,6 @@
   overflow-y: auto
   overflow-x: hidden
   outline: 0
-  max-height: 65vh
   z-index: $z-menu
 
   &--square

package/src/components/option-group/QOptionGroup.js

@@ -7,6 +7,7 @@ import QToggle from '../toggle/QToggle.js'
 import { createComponent } from '../../utils/private.create/create.js'
 
 import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import { isObject } from '../../utils/is/is.js'
 
 const components = {
   radio: QRadio,
@@ -16,6 +17,16 @@ const components = {
 
 const typeValues = Object.keys(components)
 
+function getPropValueFn (userPropName, defaultPropName) {
+  if (typeof userPropName === 'function') return userPropName
+
+  const propName = userPropName !== void 0
+    ? userPropName
+    : defaultPropName
+
+  return opt => opt[ propName ]
+}
+
 export default createComponent({
   name: 'QOptionGroup',
 
@@ -27,9 +38,14 @@ export default createComponent({
     },
     options: {
       type: Array,
-      validator: opts => opts.every(opt => 'value' in opt && 'label' in opt)
+      validator: opts => opts.every(isObject),
+      default: () => []
     },
 
+    optionValue: [ Function, String ],
+    optionLabel: [ Function, String ],
+    optionDisable: [ Function, String ],
+
     name: String,
 
     type: {
@@ -66,9 +82,26 @@ export default createComponent({
     }
 
     const isDark = useDark(props, $q)
-
     const component = computed(() => components[ props.type ])
 
+    const getOptionValue = computed(() => getPropValueFn(props.optionValue, 'value'))
+    const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, 'label'))
+    const getOptionDisable = computed(() => getPropValueFn(props.optionDisable, 'disable'))
+
+    const innerOptions = computed(() => props.options.map(opt => ({
+      val: getOptionValue.value(opt),
+      name: opt.name === void 0 ? props.name : opt.name,
+      disable: props.disable || getOptionDisable.value(opt),
+      leftLabel: opt.leftLabel === void 0 ? props.leftLabel : opt.leftLabel,
+      color: opt.color === void 0 ? props.color : opt.color,
+      checkedIcon: opt.checkedIcon,
+      uncheckedIcon: opt.uncheckedIcon,
+      dark: opt.dark === void 0 ? isDark.value : opt.dark,
+      size: opt.size === void 0 ? props.size : opt.size,
+      dense: props.dense,
+      keepColor: opt.keepColor === void 0 ? props.keepColor : opt.keepColor
+    })))
+
     const classes = computed(() =>
       'q-option-group q-gutter-x-sm'
       + (props.inline === true ? ' q-option-group--inline' : '')
@@ -109,20 +142,10 @@ export default createComponent({
 
       return h('div', [
         h(component.value, {
+          label: child === void 0 ? getOptionLabel.value(opt) : null,
           modelValue: props.modelValue,
-          val: opt.value,
-          name: opt.name === void 0 ? props.name : opt.name,
-          disable: props.disable || opt.disable,
-          label: child === void 0 ? opt.label : null,
-          leftLabel: opt.leftLabel === void 0 ? props.leftLabel : opt.leftLabel,
-          color: opt.color === void 0 ? props.color : opt.color,
-          checkedIcon: opt.checkedIcon,
-          uncheckedIcon: opt.uncheckedIcon,
-          dark: opt.dark || isDark.value,
-          size: opt.size === void 0 ? props.size : opt.size,
-          dense: props.dense,
-          keepColor: opt.keepColor === void 0 ? props.keepColor : opt.keepColor,
-          'onUpdate:modelValue': onUpdateModelValue
+          'onUpdate:modelValue': onUpdateModelValue,
+          ...innerOptions.value[ i ]
         }, child)
       ])
     }))

package/src/components/option-group/QOptionGroup.json

@@ -15,6 +15,7 @@
     "options": {
       "type": "Array",
       "desc": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
+      "default": "[]",
       "definition": {
         "label": {
           "type": "String",
@@ -39,7 +40,93 @@
         }
       },
       "examples": [ "[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]" ],
-      "category": "model"
+      "category": "options"
+    },
+
+    "option-value": {
+      "type": [ "Function", "String" ],
+      "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "default": "'value'",
+      "__runtimeDefault": true,
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'Tesla'",
+            "'iPhone'",
+            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "Any",
+        "desc": "Value of the current option",
+        "examples": [ "'car'", "34" ]
+      },
+      "examples": [
+        "'modelNumber'",
+        "item => (item === null ? null : item.modelNumber)"
+      ],
+      "category": "options",
+      "addedIn": "v2.17"
+    },
+
+    "option-label": {
+      "type": [ "Function", "String" ],
+      "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "default": "'label'",
+      "__runtimeDefault": true,
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'Tesla'",
+            "'iPhone'",
+            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "Label of the current option",
+        "examples": [ "'Tesla'", "'iPhone'" ]
+      },
+      "examples": [
+        "'itemName'",
+        "item => (item === null ? 'Null value' : item.itemName)"
+      ],
+      "category": "options",
+      "addedIn": "v2.17"
+    },
+
+    "option-disable": {
+      "type": [ "Function", "String" ],
+      "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "default": "'disable'",
+      "__runtimeDefault": true,
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'Tesla'",
+            "'iPhone'",
+            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current option will be disabled"
+      },
+      "examples": [
+        "item => (item === null ? true : item.cannotSelect)",
+        "# option-disable=\"cannotSelect\""
+      ],
+      "category": "options",
+      "addedIn": "v2.17"
     },
 
     "name": {

package/src/components/radio/QRadio.js

@@ -12,7 +12,7 @@ import optionSizes from '../../utils/private.option-sizes/option-sizes.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
 
-const svg = h('svg', {
+const createSvg = () => h('svg', {
   key: 'svg',
   class: 'q-radio__bg absolute non-selectable',
   viewBox: '0 0 24 24'
@@ -138,6 +138,8 @@ export default createComponent({
     // expose public methods
     Object.assign(proxy, { set: onClick })
 
+    const svg = createSvg()
+
     return () => {
       const content = icon.value !== null
         ? [

package/src/components/scroll-area/QScrollArea.js

@@ -1,7 +1,8 @@
-import { h, ref, computed, watch, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
+import ScrollAreaControls from './ScrollAreaControls.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 import QScrollObserver from '../scroll-observer/QScrollObserver.js'
 
@@ -40,6 +41,15 @@ export default createComponent({
     verticalBarStyle: [ Array, String, Object ],
     horizontalBarStyle: [ Array, String, Object ],
 
+    verticalOffset: {
+      type: Array,
+      default: [ 0, 0 ]
+    },
+    horizontalOffset: {
+      type: Array,
+      default: [ 0, 0 ]
+    },
+
     contentStyle: [ Array, String, Object ],
     contentActiveStyle: [ Array, String, Object ],
 
@@ -97,47 +107,57 @@ export default createComponent({
       + (isDark.value === true ? ' q-scrollarea--dark' : '')
     )
 
+    Object.assign(container, {
+      verticalInner: computed(() => (
+        container.vertical.value - props.verticalOffset[ 0 ] - props.verticalOffset[ 1 ]
+      )),
+
+      horizontalInner: computed(() => (
+        container.horizontal.value - props.horizontalOffset[ 0 ] - props.horizontalOffset[ 1 ]
+      ))
+    })
+
     scroll.vertical.percentage = computed(() => {
       const diff = scroll.vertical.size.value - container.vertical.value
       if (diff <= 0) { return 0 }
       const p = between(scroll.vertical.position.value / diff, 0, 1)
       return Math.round(p * 10000) / 10000
     })
-    scroll.vertical.thumbHidden = computed(() =>
+    scroll.vertical.thumbHidden = computed(() => (
       (
         (props.visible === null ? hover.value : props.visible) !== true
         && tempShowing.value === false
         && 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.thumbStart = computed(() => (
+      props.verticalOffset[ 0 ]
+      + scroll.vertical.percentage.value * (container.verticalInner.value - scroll.vertical.thumbSize.value)
+    ))
     scroll.vertical.thumbSize = computed(() =>
       Math.round(
         between(
-          container.vertical.value * container.vertical.value / scroll.vertical.size.value,
-          getMinThumbSize(container.vertical.value),
-          container.vertical.value
+          container.verticalInner.value * container.verticalInner.value / scroll.vertical.size.value,
+          getMinThumbSize(container.verticalInner.value),
+          container.verticalInner.value
         )
       )
     )
-    scroll.vertical.style = computed(() => {
-      return {
-        ...props.thumbStyle,
-        ...props.verticalThumbStyle,
-        top: `${ scroll.vertical.thumbStart.value }px`,
-        height: `${ scroll.vertical.thumbSize.value }px`
-      }
-    })
-    scroll.vertical.thumbClass = computed(() =>
+    scroll.vertical.style = computed(() => ({
+      ...props.thumbStyle,
+      ...props.verticalThumbStyle,
+      top: `${ scroll.vertical.thumbStart.value }px`,
+      height: `${ scroll.vertical.thumbSize.value }px`,
+      right: `${ props.horizontalOffset[ 1 ] }px`
+    }))
+    scroll.vertical.thumbClass = computed(() => (
       'q-scrollarea__thumb q-scrollarea__thumb--v absolute-right'
       + (scroll.vertical.thumbHidden.value === true ? ' q-scrollarea__thumb--invisible' : '')
-    )
-    scroll.vertical.barClass = computed(() =>
+    ))
+    scroll.vertical.barClass = computed(() => (
       'q-scrollarea__bar q-scrollarea__bar--v absolute-right'
       + (scroll.vertical.thumbHidden.value === true ? ' q-scrollarea__bar--invisible' : '')
-    )
+    ))
 
     scroll.horizontal.percentage = computed(() => {
       const diff = scroll.horizontal.size.value - container.horizontal.value
@@ -145,41 +165,41 @@ export default createComponent({
       const p = between(Math.abs(scroll.horizontal.position.value) / diff, 0, 1)
       return Math.round(p * 10000) / 10000
     })
-    scroll.horizontal.thumbHidden = computed(() =>
+    scroll.horizontal.thumbHidden = computed(() => (
       (
         (props.visible === null ? hover.value : props.visible) !== true
         && tempShowing.value === false
         && 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.thumbStart = computed(() => (
+      props.horizontalOffset[ 0 ]
+      + scroll.horizontal.percentage.value * (container.horizontalInner.value - scroll.horizontal.thumbSize.value)
+    ))
     scroll.horizontal.thumbSize = computed(() =>
       Math.round(
         between(
-          container.horizontal.value * container.horizontal.value / scroll.horizontal.size.value,
-          getMinThumbSize(container.horizontal.value),
-          container.horizontal.value
+          container.horizontalInner.value * container.horizontalInner.value / scroll.horizontal.size.value,
+          getMinThumbSize(container.horizontalInner.value),
+          container.horizontalInner.value
         )
       )
     )
-    scroll.horizontal.style = computed(() => {
-      return {
-        ...props.thumbStyle,
-        ...props.horizontalThumbStyle,
-        [ proxy.$q.lang.rtl === true ? 'right' : 'left' ]: `${ scroll.horizontal.thumbStart.value }px`,
-        width: `${ scroll.horizontal.thumbSize.value }px`
-      }
-    })
-    scroll.horizontal.thumbClass = computed(() =>
+    scroll.horizontal.style = computed(() => ({
+      ...props.thumbStyle,
+      ...props.horizontalThumbStyle,
+      [ proxy.$q.lang.rtl === true ? 'right' : 'left' ]: `${ scroll.horizontal.thumbStart.value }px`,
+      width: `${ scroll.horizontal.thumbSize.value }px`,
+      bottom: `${ props.verticalOffset[ 1 ] }px`
+    }))
+    scroll.horizontal.thumbClass = computed(() => (
       'q-scrollarea__thumb q-scrollarea__thumb--h absolute-bottom'
       + (scroll.horizontal.thumbHidden.value === true ? ' q-scrollarea__thumb--invisible' : '')
-    )
-    scroll.horizontal.barClass = computed(() =>
+    ))
+    scroll.horizontal.barClass = computed(() => (
       'q-scrollarea__bar q-scrollarea__bar--h absolute-bottom'
       + (scroll.horizontal.thumbHidden.value === true ? ' q-scrollarea__bar--invisible' : '')
-    )
+    ))
 
     const mainStyle = computed(() => (
       scroll.vertical.thumbHidden.value === true && scroll.horizontal.thumbHidden.value === true
@@ -187,30 +207,18 @@ export default createComponent({
         : props.contentActiveStyle
     ))
 
-    const thumbVertDir = [ [
-      TouchPan,
-      e => { onPanThumb(e, 'vertical') },
-      void 0,
-      { vertical: true, ...panOpts }
-    ] ]
-
-    const thumbHorizDir = [ [
-      TouchPan,
-      e => { onPanThumb(e, 'horizontal') },
-      void 0,
-      { horizontal: true, ...panOpts }
-    ] ]
-
     function getScroll () {
       const info = {}
 
       axisList.forEach(axis => {
         const data = scroll[ axis ]
-
-        info[ axis + 'Position' ] = data.position.value
-        info[ axis + 'Percentage' ] = data.percentage.value
-        info[ axis + 'Size' ] = data.size.value
-        info[ axis + 'ContainerSize' ] = container[ axis ].value
+        Object.assign(info, {
+          [ axis + 'Position' ]: data.position.value,
+          [ axis + 'Percentage' ]: data.percentage.value,
+          [ axis + 'Size' ]: data.size.value,
+          [ axis + 'ContainerSize' ]: container[ axis ].value,
+          [ axis + 'ContainerInnerSize' ]: container[ axis + 'Inner' ].value
+        })
       })
 
       return info
@@ -302,9 +310,11 @@ export default createComponent({
       }
 
       const dProp = dirProps[ axis ]
-      const containerSize = container[ axis ].value
 
-      const multiplier = (data.size.value - containerSize) / (containerSize - data.thumbSize.value)
+      const multiplier = (
+        (data.size.value - container[ axis ].value)
+        / (container[ axis + 'Inner' ].value - data.thumbSize.value)
+      )
       const distance = e.distance[ dProp.dist ]
       const pos = panRefPos + (e.direction === dProp.dir ? 1 : -1) * distance * multiplier
 
@@ -315,10 +325,17 @@ export default createComponent({
       const data = scroll[ axis ]
 
       if (data.thumbHidden.value !== true) {
-        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)
+        const startOffset = axis === 'vertical'
+          ? props.verticalOffset[ 0 ]
+          : props.horizontalOffset[ 0 ]
+
+        const offset = evt[ dirProps[ axis ].offset ] - startOffset
+        const thumbStart = data.thumbStart.value - startOffset
+
+        if (offset < thumbStart || offset > thumbStart + data.thumbSize.value) {
+          const targetThumbStart = offset - data.thumbSize.value / 2
+          const percentage = between(targetThumbStart / (container[ axis + 'Inner' ].value - data.thumbSize.value), 0, 1)
+          setScroll(percentage * Math.max(0, data.size.value - container[ axis ].value), axis)
         }
 
         // activate thumb pan
@@ -328,14 +345,6 @@ export default createComponent({
       }
     }
 
-    function onVerticalMousedown (evt) {
-      onMousedown(evt, 'vertical')
-    }
-
-    function onHorizontalMousedown (evt) {
-      onMousedown(evt, 'horizontal')
-    }
-
     function startTimer () {
       tempShowing.value = true
 
@@ -430,6 +439,32 @@ export default createComponent({
       }
     })
 
+    const store = {
+      scroll,
+
+      thumbVertDir: [ [
+        TouchPan,
+        e => { onPanThumb(e, 'vertical') },
+        void 0,
+        { vertical: true, ...panOpts }
+      ] ],
+
+      thumbHorizDir: [ [
+        TouchPan,
+        e => { onPanThumb(e, 'horizontal') },
+        void 0,
+        { horizontal: true, ...panOpts }
+      ] ],
+
+      onVerticalMousedown (evt) {
+        onMousedown(evt, 'vertical')
+      },
+
+      onHorizontalMousedown (evt) {
+        onMousedown(evt, 'horizontal')
+      }
+    }
+
     return () => {
       return h('div', {
         class: classes.value,
@@ -462,39 +497,12 @@ export default createComponent({
           onResize: updateContainer
         }),
 
-        h('div', {
-          class: scroll.vertical.barClass.value,
-          style: [ props.barStyle, props.verticalBarStyle ],
-          'aria-hidden': 'true',
-          onMousedown: onVerticalMousedown
-        }),
-
-        h('div', {
-          class: scroll.horizontal.barClass.value,
-          style: [ props.barStyle, props.horizontalBarStyle ],
-          'aria-hidden': 'true',
-          onMousedown: onHorizontalMousedown
-        }),
-
-        withDirectives(
-          h('div', {
-            ref: scroll.vertical.ref,
-            class: scroll.vertical.thumbClass.value,
-            style: scroll.vertical.style.value,
-            'aria-hidden': 'true'
-          }),
-          thumbVertDir
-        ),
-
-        withDirectives(
-          h('div', {
-            ref: scroll.horizontal.ref,
-            class: scroll.horizontal.thumbClass.value,
-            style: scroll.horizontal.style.value,
-            'aria-hidden': 'true'
-          }),
-          thumbHorizDir
-        )
+        h(ScrollAreaControls, {
+          store,
+          barStyle: props.barStyle,
+          verticalBarStyle: props.verticalBarStyle,
+          horizontalBarStyle: props.horizontalBarStyle
+        })
       ])
     }
   }