quasar 2.16.10 → 2.17.0

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

@@ -8,6 +8,22 @@
       "extends": "dark"
     },
 
+    "vertical-offset": {
+      "type": "Array",
+      "desc": "Adds [top, bottom] offset to vertical thumb",
+      "default": "# [ 0, 0 ]",
+      "category": "style",
+      "addedIn": "v2.17"
+    },
+
+    "horizontal-offset": {
+      "type": "Array",
+      "desc": "Adds [left, right] offset to horizontal thumb",
+      "default": "# [ 0, 0 ]",
+      "category": "style",
+      "addedIn": "v2.17"
+    },
+
     "bar-style": {
       "type": [ "String", "Array", "Object" ],
       "tsType": "VueStyleProp",
@@ -132,6 +148,12 @@
               "required": true,
               "desc": "Height of the container (in px)"
             },
+            "verticalContainerInnerSize": {
+              "type": "Number",
+              "required": true,
+              "desc": "Height of the container without the vertical offset (in px)",
+              "addedIn": "v2.17"
+            },
 
             "horizontalPosition": {
               "type": "Number",
@@ -152,6 +174,12 @@
               "type": "Number",
               "required": true,
               "desc": "Width of the container (in px)"
+            },
+            "horizontalContainerInnerSize": {
+              "type": "Number",
+              "required": true,
+              "desc": "Width of the container without the horizontal offset (in px)",
+              "addedIn": "v2.17"
             }
           }
         }
@@ -196,6 +224,12 @@
             "required": true,
             "desc": "Height of the container (in px)"
           },
+          "verticalContainerInnerSize": {
+            "type": "Number",
+            "required": true,
+            "desc": "Height of the container without the vertical offset (in px)",
+            "addedIn": "v2.17"
+          },
 
           "horizontalPosition": {
             "type": "Number",
@@ -216,6 +250,12 @@
             "type": "Number",
             "required": true,
             "desc": "Width of the container (in px)"
+          },
+          "horizontalContainerInnerSize": {
+            "type": "Number",
+            "required": true,
+            "desc": "Width of the container without the horizontal offset (in px)",
+            "addedIn": "v2.17"
           }
         }
       }

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

@@ -0,0 +1,54 @@
+import { h, withDirectives } from 'vue'
+
+import { createComponent } from '../../utils/private.create/create.js'
+
+/**
+ * We are using a sub-component to avoid unnecessary re-renders
+ * of the QScrollArea content when the scrollbars are interacted with.
+ */
+export default createComponent({
+  props: [
+    'store',
+    'barStyle',
+    'verticalBarStyle',
+    'horizontalBarStyle'
+  ],
+
+  setup (props) {
+    return () => ([
+      h('div', {
+        class: props.store.scroll.vertical.barClass.value,
+        style: [ props.barStyle, props.verticalBarStyle ],
+        'aria-hidden': 'true',
+        onMousedown: props.store.onVerticalMousedown
+      }),
+
+      h('div', {
+        class: props.store.scroll.horizontal.barClass.value,
+        style: [ props.barStyle, props.horizontalBarStyle ],
+        'aria-hidden': 'true',
+        onMousedown: props.store.onHorizontalMousedown
+      }),
+
+      withDirectives(
+        h('div', {
+          ref: props.store.scroll.vertical.ref,
+          class: props.store.scroll.vertical.thumbClass.value,
+          style: props.store.scroll.vertical.style.value,
+          'aria-hidden': 'true'
+        }),
+        props.store.thumbVertDir
+      ),
+
+      withDirectives(
+        h('div', {
+          ref: props.store.scroll.horizontal.ref,
+          class: props.store.scroll.horizontal.thumbClass.value,
+          style: props.store.scroll.horizontal.style.value,
+          'aria-hidden': 'true'
+        }),
+        props.store.thumbHorizDir
+      )
+    ])
+  }
+})

package/src/components/select/QSelect.js

@@ -27,6 +27,16 @@ const validateNewValueMode = v => [ 'add', 'add-unique', 'toggle' ].includes(v)
 const reEscapeList = '.*+?^${}()|[]\\'
 const fieldPropsList = Object.keys(useFieldProps)
 
+function getPropValueFn (userPropName, defaultPropName) {
+  if (typeof userPropName === 'function') return userPropName
+
+  const propName = userPropName !== void 0
+    ? userPropName
+    : defaultPropName
+
+  return opt => ((opt !== null && typeof opt === 'object' && propName in opt) ? opt[ propName ] : opt)
+}
+
 export default createComponent({
   name: 'QSelect',
 
@@ -93,6 +103,8 @@ export default createComponent({
     mapOptions: Boolean,
     emitValue: Boolean,
 
+    disableTabSelection: Boolean,
+
     inputDebounce: {
       type: [ Number, String ],
       default: 500
@@ -159,12 +171,7 @@ export default createComponent({
 
     const onComposition = useKeyComposition(onInput)
 
-    const virtualScrollLength = computed(() => (
-      Array.isArray(props.options)
-        ? props.options.length
-        : 0
-    ))
-
+    const virtualScrollLength = computed(() => props.options.length)
     const virtualScrollItemSizeComputed = computed(() => (
       props.virtualScrollItemSize === void 0
         ? (props.optionsDense === true ? 24 : 48)
@@ -193,7 +200,7 @@ export default createComponent({
           ? (props.multiple === true && Array.isArray(props.modelValue) ? props.modelValue : [ props.modelValue ])
           : []
 
-      if (props.mapOptions === true && Array.isArray(props.options) === true) {
+      if (props.mapOptions === true) {
         const cache = props.mapOptions === true && innerValueCache !== void 0
           ? innerValueCache
           : []
@@ -393,7 +400,7 @@ export default createComponent({
     // takes into account 'option-disable' prop
     const isOptionDisabled = computed(() => getPropValueFn(props.optionDisable, 'disable'))
 
-    const innerOptionsValue = computed(() => innerValue.value.map(opt => getOptionValue.value(opt)))
+    const innerOptionsValue = computed(() => innerValue.value.map(getOptionValue.value))
 
     const inputControlEvents = computed(() => {
       const evt = {
@@ -605,16 +612,6 @@ export default createComponent({
       return props.options.find(fn) || valueCache.find(fn) || value
     }
 
-    function getPropValueFn (propValue, defaultVal) {
-      const val = propValue !== void 0
-        ? propValue
-        : defaultVal
-
-      return typeof val === 'function'
-        ? val
-        : opt => (opt !== null && typeof opt === 'object' && val in opt ? opt[ val ] : opt)
-    }
-
     function isOptionSelected (opt) {
       const val = getOptionValue.value(opt)
       return innerOptionsValue.value.find(v => isDeepEqual(v, val)) !== void 0
@@ -716,6 +713,7 @@ export default createComponent({
         && (props.newValueMode !== void 0 || props.onNewValue !== void 0)
 
       const tabShouldSelect = e.shiftKey !== true
+        && props.disableTabSelection !== true
         && props.multiple !== true
         && (optionIndex.value !== -1 || newValueModeValid === true)
 

package/src/components/select/QSelect.json

@@ -277,6 +277,13 @@
       "category": "options"
     },
 
+    "disable-tab-selection": {
+      "type": "Boolean",
+      "desc": "Prevents the tab key from confirming the currently hovered option",
+      "category": "options",
+      "addedIn": "v2.17"
+    },
+
     "emit-value": {
       "type": "Boolean",
       "desc": "Update model with the value of the selected option instead of the whole option",

package/src/components/space/QSpace.js

@@ -2,12 +2,11 @@ import { h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const space = h('div', { class: 'q-space' })
-
 export default createComponent({
   name: 'QSpace',
 
   setup () {
+    const space = h('div', { class: 'q-space' })
     return () => space
   }
 })

package/src/components/spinner/QSpinnerAudio.js

@@ -1,74 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
-  h('g', {
-    transform: 'matrix(1 0 0 -1 0 80)'
-  }, [
-    h('rect', {
-      width: '10',
-      height: '20',
-      rx: '3'
-    }, [
-      h('animate', {
-        attributeName: 'height',
-        begin: '0s',
-        dur: '4.3s',
-        values: '20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('rect', {
-      x: '15',
-      width: '10',
-      height: '80',
-      rx: '3'
-    }, [
-      h('animate', {
-        attributeName: 'height',
-        begin: '0s',
-        dur: '2s',
-        values: '80;55;33;5;75;23;73;33;12;14;60;80',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('rect', {
-      x: '30',
-      width: '10',
-      height: '50',
-      rx: '3'
-    }, [
-      h('animate', {
-        attributeName: 'height',
-        begin: '0s',
-        dur: '1.4s',
-        values: '50;34;78;23;56;23;34;76;80;54;21;50',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('rect', {
-      x: '45',
-      width: '10',
-      height: '30',
-      rx: '3'
-    }, [
-      h('animate', {
-        attributeName: 'height',
-        begin: '0s',
-        dur: '2s',
-        values: '30;45;13;80;56;72;45;76;34;23;67;30',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g transform="matrix(1 0 0 -1 0 80)"><rect width="10" height="20" rx="3"><animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="15" width="10" height="80" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" width="10" height="50" rx="3"><animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="45" width="10" height="30" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"></animate></rect></g>'
 
 export default createComponent({
   name: 'QSpinnerAudio',
@@ -77,14 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-
     return () => h('svg', {
       class: classes.value,
       fill: 'currentColor',
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 55 80',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerBall.js

@@ -1,90 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
-  h('g', {
-    transform: 'translate(1 1)',
-    'stroke-width': '2',
-    fill: 'none',
-    'fill-rule': 'evenodd'
-  }, [
-    h('circle', {
-      cx: '5',
-      cy: '50',
-      r: '5'
-    }, [
-      h('animate', {
-        attributeName: 'cy',
-        begin: '0s',
-        dur: '2.2s',
-        values: '50;5;50;50',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'cx',
-        begin: '0s',
-        dur: '2.2s',
-        values: '5;27;49;5',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('circle', {
-      cx: '27',
-      cy: '5',
-      r: '5'
-    }, [
-      h('animate', {
-        attributeName: 'cy',
-        begin: '0s',
-        dur: '2.2s',
-        from: '5',
-        to: '5',
-        values: '5;50;50;5',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'cx',
-        begin: '0s',
-        dur: '2.2s',
-        from: '27',
-        to: '27',
-        values: '27;49;5;27',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ]),
-    h('circle', {
-      cx: '49',
-      cy: '50',
-      r: '5'
-    }, [
-      h('animate', {
-        attributeName: 'cy',
-        begin: '0s',
-        dur: '2.2s',
-        values: '50;50;5;50',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      }),
-      h('animate', {
-        attributeName: 'cx',
-        from: '49',
-        to: '49',
-        begin: '0s',
-        dur: '2.2s',
-        values: '49;5;27;49',
-        calcMode: 'linear',
-        repeatCount: 'indefinite'
-      })
-    ])
-  ])
-]
+const innerHTML = '<g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="5" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="27" cy="5" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="49" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite"></animate></circle></g>'
 
 export default createComponent({
   name: 'QSpinnerBall',
@@ -93,14 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-
     return () => h('svg', {
       class: classes.value,
       stroke: 'currentColor',
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 57 57',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerBars.js

@@ -1,129 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
-  h('rect', {
-    y: '10',
-    width: '15',
-    height: '120',
-    rx: '6'
-  }, [
-    h('animate', {
-      attributeName: 'height',
-      begin: '0.5s',
-      dur: '1s',
-      values: '120;110;100;90;80;70;60;50;40;140;120',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    }),
-    h('animate', {
-      attributeName: 'y',
-      begin: '0.5s',
-      dur: '1s',
-      values: '10;15;20;25;30;35;40;45;50;0;10',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('rect', {
-    x: '30',
-    y: '10',
-    width: '15',
-    height: '120',
-    rx: '6'
-  }, [
-    h('animate', {
-      attributeName: 'height',
-      begin: '0.25s',
-      dur: '1s',
-      values: '120;110;100;90;80;70;60;50;40;140;120',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    }),
-    h('animate', {
-      attributeName: 'y',
-      begin: '0.25s',
-      dur: '1s',
-      values: '10;15;20;25;30;35;40;45;50;0;10',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('rect', {
-    x: '60',
-    width: '15',
-    height: '140',
-    rx: '6'
-  }, [
-    h('animate', {
-      attributeName: 'height',
-      begin: '0s',
-      dur: '1s',
-      values: '120;110;100;90;80;70;60;50;40;140;120',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    }),
-    h('animate', {
-      attributeName: 'y',
-      begin: '0s',
-      dur: '1s',
-      values: '10;15;20;25;30;35;40;45;50;0;10',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('rect', {
-    x: '90',
-    y: '10',
-    width: '15',
-    height: '120',
-    rx: '6'
-  }, [
-    h('animate', {
-      attributeName: 'height',
-      begin: '0.25s',
-      dur: '1s',
-      values: '120;110;100;90;80;70;60;50;40;140;120',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    }),
-    h('animate', {
-      attributeName: 'y',
-      begin: '0.25s',
-      dur: '1s',
-      values: '10;15;20;25;30;35;40;45;50;0;10',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ]),
-  h('rect', {
-    x: '120',
-    y: '10',
-    width: '15',
-    height: '120',
-    rx: '6'
-  }, [
-    h('animate', {
-      attributeName: 'height',
-      begin: '0.5s',
-      dur: '1s',
-      values: '120;110;100;90;80;70;60;50;40;140;120',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    }),
-    h('animate', {
-      attributeName: 'y',
-      begin: '0.5s',
-      dur: '1s',
-      values: '10;15;20;25;30;35;40;45;50;0;10',
-      calcMode: 'linear',
-      repeatCount: 'indefinite'
-    })
-  ])
-]
+const innerHTML = '<rect y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="60" width="15" height="140" rx="6"><animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="90" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="120" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect>'
 
 export default createComponent({
   name: 'QSpinnerBars',
@@ -132,14 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-
     return () => h('svg', {
       class: classes.value,
       fill: 'currentColor',
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 135 140',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })

package/src/components/spinner/QSpinnerBox.js

@@ -1,47 +1,9 @@
 import { h } from 'vue'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
-
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
-  h('rect', {
-    x: '25',
-    y: '25',
-    width: '50',
-    height: '50',
-    fill: 'none',
-    'stroke-width': '4',
-    stroke: 'currentColor'
-  }, [
-    h('animateTransform', {
-      id: 'spinnerBox',
-      attributeName: 'transform',
-      type: 'rotate',
-      from: '0 50 50',
-      to: '180 50 50',
-      dur: '0.5s',
-      begin: 'rectBox.end'
-    })
-  ]),
-  h('rect', {
-    x: '27',
-    y: '27',
-    width: '46',
-    height: '50',
-    fill: 'currentColor'
-  }, [
-    h('animate', {
-      id: 'rectBox',
-      attributeName: 'height',
-      begin: '0s;spinnerBox.end',
-      dur: '1.3s',
-      from: '50',
-      to: '0',
-      fill: 'freeze'
-    })
-  ])
-]
+const innerHTML = '<rect x="25" y="25" width="50" height="50" fill="none" stroke-width="4" stroke="currentColor"><animateTransform id="spinnerBox" attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" dur="0.5s" begin="rectBox.end"></animateTransform></rect><rect x="27" y="27" width="46" height="50" fill="currentColor"><animate id="rectBox" attributeName="height" begin="0s;spinnerBox.end" dur="1.3s" from="50" to="0" fill="freeze"></animate></rect>'
 
 export default createComponent({
   name: 'QSpinnerBox',
@@ -50,14 +12,14 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
-
     return () => h('svg', {
       class: classes.value,
       width: cSize.value,
       height: cSize.value,
       viewBox: '0 0 100 100',
       preserveAspectRatio: 'xMidYMid',
-      xmlns: 'http://www.w3.org/2000/svg'
-    }, svg)
+      xmlns: 'http://www.w3.org/2000/svg',
+      innerHTML
+    })
   }
 })