quasar 2.4.10 → 2.5.0

package/src/components/pagination/QPagination.json

@@ -51,7 +51,8 @@
     },
 
     "input-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the input (if using one)",
       "examples": [
         "background-color: #ff0000",
@@ -61,7 +62,8 @@
     },
 
     "input-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the input (if using one)",
       "examples": [
         "my-special-class",

package/src/components/radio/QRadio.js

@@ -1,5 +1,7 @@
 import { h, ref, computed, getCurrentInstance } from 'vue'
 
+import QIcon from '../icon/QIcon.js'
+
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import useRefocusTarget from '../../composables/private/use-refocus-target.js'
@@ -11,6 +13,7 @@ import { stopAndPrevent } from '../../utils/event.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 
 const svg = h('svg', {
+  key: 'svg',
   class: 'q-radio__bg absolute non-selectable',
   viewBox: '0 0 24 24',
   'aria-hidden': 'true'
@@ -39,6 +42,9 @@ export default createComponent({
     label: String,
     leftLabel: Boolean,
 
+    checkedIcon: String,
+    uncheckedIcon: String,
+
     color: String,
     keepColor: Boolean,
     dense: Boolean,
@@ -80,6 +86,13 @@ export default createComponent({
         + `q-radio__inner--${ isTrue.value === true ? 'truthy' : 'falsy' }${ color }`
     })
 
+    const icon = computed(() =>
+      (isTrue.value === true
+        ? props.checkedIcon
+        : props.uncheckedIcon
+      ) || null
+    )
+
     const tabindex = computed(() => (
       props.disable === true ? -1 : props.tabindex || 0
     ))
@@ -125,7 +138,19 @@ export default createComponent({
     Object.assign(proxy, { set: onClick })
 
     return () => {
-      const content = [ svg ]
+      const content = icon.value !== null
+        ? [
+            h('div', {
+              key: 'icon',
+              class: 'q-radio__icon-container absolute flex flex-center no-wrap'
+            }, [
+              h(QIcon, {
+                class: 'q-radio__icon',
+                name: icon.value
+              })
+            ])
+          ]
+        : [ svg ]
 
       props.disable !== true && injectFormInput(
         content,

package/src/components/radio/QRadio.json

@@ -33,6 +33,22 @@
       "category": "label"
     },
 
+    "checked-icon": {
+      "type": "String",
+      "desc": "The icon to be used when selected (instead of the default design)",
+      "examples": [ "visibility" ],
+      "category": "icons",
+      "addedIn": "v2.5"
+    },
+
+    "unchecked-icon": {
+      "type": "String",
+      "desc": "The icon to be used when un-selected (instead of the default design)",
+      "examples": [ "visibility_off" ],
+      "category": "icons",
+      "addedIn": "v2.5"
+    },
+
     "color": {
       "extends": "color"
     },

package/src/components/radio/QRadio.sass

@@ -3,19 +3,26 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 .q-radio
   vertical-align: middle
 
-  &__bg
+  &__native
+    width: 1px
+    height: 1px
+
+  &__bg,
+  &__icon-container
     top: 25%
     left: 25%
     width: 50%
     height: 50%
-    -webkit-print-color-adjust: exact
+    user-select: none
 
+  &__bg
+    -webkit-print-color-adjust: exact
     path
       fill: currentColor
 
-  &__native
-    width: 1px
-    height: 1px
+  &__icon
+    color: currentColor
+    font-size: .6em
 
   &__check
     transform-origin: 50% 50%
@@ -49,12 +56,16 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--dense
 
+    .q-checkbox__icon
+      font-size: .6em
+
     .q-radio__inner
       width: .5em
       min-width: .5em
       height: .5em
 
-    .q-radio__bg
+    .q-radio__bg,
+    .q-radio__icon-container
       left: 0
       top: 0
       width: 100%

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -380,6 +380,26 @@ export default createComponent({
       }
     })
 
+    let scrollPosition = null
+
+    onDeactivated(() => {
+      scrollPosition = {
+        top: scroll.vertical.position.value,
+        left: scroll.horizontal.position.value
+      }
+    })
+
+    onActivated(() => {
+      if (scrollPosition === null) { return }
+
+      const scrollTarget = targetRef.value
+
+      if (scrollTarget !== null) {
+        setHorizontalScrollPosition(scrollTarget, scrollPosition.left)
+        setVerticalScrollPosition(scrollTarget, scrollPosition.top)
+      }
+    })
+
     onBeforeUnmount(emitScroll.cancel)
 
     return () => {

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

@@ -9,21 +9,24 @@
     },
 
     "bar-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)",
       "examples": [ ":bar-style=\"{ borderRadius: '5px', background: 'red', opacity: 1 }\"" ],
       "category": "style"
     },
 
     "vertical-bar-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of 'bar-style' prop",
       "examples": [ ":bar-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
       "category": "style"
     },
 
     "horizontal-bar-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of 'bar-style' prop",
       "examples": [ ":bar-style=\"{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }\"" ],
       "category": "style"
@@ -31,6 +34,7 @@
 
     "thumb-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for custom styling the thumb of scrollbars (both vertical and horizontal)",
       "examples": [ ":thumb-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
       "category": "style"
@@ -38,6 +42,7 @@
 
     "vertical-thumb-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for custom styling the thumb of the vertical scrollbar; Is applied on top of 'thumb-style' prop",
       "examples": [ ":thumb-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
       "category": "style"
@@ -45,20 +50,23 @@
 
     "horizontal-thumb-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for custom styling the thumb of the horizontal scrollbar; Is applied on top of 'thumb-style' prop",
       "examples": [ ":thumb-style=\"{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }\"" ],
       "category": "style"
     },
 
     "content-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for styling the container of QScrollArea",
       "examples": [ ":content-style=\"{ backgroundColor: '#C0C0C0' }\"" ],
       "category": "style"
     },
 
     "content-active-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)",
       "examples": [ ":content-active-style=\"{ backgroundColor: 'white' }\"" ],
       "category": "style"

package/src/components/select/QSelect.js

@@ -610,8 +610,12 @@ export default createComponent({
       return innerOptionsValue.value.find(v => isDeepEqual(v, val)) !== void 0
     }
 
-    function selectInputText () {
-      if (props.useInput === true && targetRef.value !== null) {
+    function selectInputText (e) {
+      if (
+        props.useInput === true
+        && targetRef.value !== null
+        && (e === void 0 || (targetRef.value === e.target && e.target.value === selectedString.value))
+      ) {
         targetRef.value.select()
       }
     }
@@ -981,7 +985,7 @@ export default createComponent({
         type: 'search',
         ...comboboxAttrs.value,
         ...state.splitAttrs.attributes.value,
-        id: state.targetUid.value,
+        id: isTarget === true ? state.targetUid.value : void 0,
         maxlength: props.maxlength,
         autocomplete: props.autocomplete,
         'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
@@ -992,7 +996,7 @@ export default createComponent({
 
       if (fromDialog !== true && hasDialog === true) {
         if (Array.isArray(data.class) === true) {
-          data.class[ 0 ] += ' no-pointer-events'
+          data.class = [ ...data.class, 'no-pointer-events' ]
         }
         else {
           data.class += ' no-pointer-events'
@@ -1385,7 +1389,7 @@ export default createComponent({
       filter, updateMenuPosition, updateInputValue,
       isOptionSelected,
       getEmittingOptionValue,
-      isOptionDisabled: (...args) => isOptionDisabled.value.apply(null, args),
+      isOptionDisabled: (...args) => isOptionDisabled.value.apply(null, args) === true,
       getOptionValue: (...args) => getOptionValue.value.apply(null, args),
       getOptionLabel: (...args) => getOptionLabel.value.apply(null, args)
     })
@@ -1458,13 +1462,13 @@ export default createComponent({
           child.push(getInput(fromDialog, isTarget))
         }
         // there can be only one (when dialog is opened the control in dialog should be target)
-        else if (state.editable.value === true && isTarget === true) {
+        else if (state.editable.value === true) {
           child.push(
             h('div', {
-              ref: targetRef,
+              ref: isTarget === true ? targetRef : void 0,
               key: 'd_t',
               class: 'q-select__focus-target',
-              id: state.targetUid.value,
+              id: isTarget === true ? state.targetUid.value : void 0,
               ...comboboxAttrs.value,
               onKeydown: onTargetKeydown,
               onKeyup: onTargetKeyup,
@@ -1472,7 +1476,7 @@ export default createComponent({
             })
           )
 
-          if (typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
+          if (isTarget === true && typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
             child.push(
               h('input', {
                 class: 'q-select__autocomplete-input',

package/src/components/select/QSelect.json

@@ -224,7 +224,8 @@
     },
 
     "popup-content-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the popup content",
       "examples": [
         "background-color: #ff0000",
@@ -279,7 +280,8 @@
     },
 
     "input-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying input tag",
       "examples": [
         "my-special-class",
@@ -289,7 +291,8 @@
     },
 
     "input-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying input tag",
       "examples": [
         "background-color: #ff0000",

package/src/components/select/QSelect.sass

@@ -8,6 +8,7 @@
 
   .q-field__input
     min-width: 50px !important
+    cursor: text
 
     &--padding
       padding-left: 4px