quasar 2.7.7 → 2.8.1

package/src/components/editor/QEditor.json

@@ -76,74 +76,83 @@
         ":definitions=\"{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }\""
       ],
       "definition": {
-        "label": {
-          "type": "String",
-          "desc": "Label of the button",
-          "examples": [ "Addresses" ]
-        },
-        "tip": {
-          "type": "String",
-          "desc": "Text to be displayed as a tooltip on hover",
-          "examples": [ "Add a contact from the Address Book" ]
-        },
-        "htmlTip": {
-          "type": "String",
-          "desc": "HTML formatted text to be displayed within a tooltip on hover",
-          "examples": [ "Add a <span class=\"red\">user</span> from the address book" ]
-        },
-        "icon": {
-          "type": "String",
-          "desc": "Icon of the button",
-          "examples": [ "fas fa-address-book" ]
-        },
-        "key": {
-          "type": "Number",
-          "desc": "Keycode of a key to be used together with the <ctrl> key for use as a shortcut to trigger this element",
-          "examples": [ "12", "36" ]
-        },
-        "handler": {
-          "type": "Function",
-          "desc": "Either this or \"cmd\" is required. Function for when button gets clicked/tapped.",
-          "params": null,
-          "returns": null,
-          "examples": [ "() => this.uploadFile()" ]
-        },
-        "cmd": {
-          "type": "String",
-          "desc": "Either this or \"handler\" is required. This must be a valid execCommand method according to the designMode API.",
-          "examples": [ "insertHTML", "justifyFull" ]
-        },
-        "param": {
-          "type": "String",
-          "desc": "Only set a param if using a \"cmd\". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.",
-          "examples": [ "<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />" ]
-        },
-        "disable": {
-          "type": [ "Boolean", "Function" ],
-          "desc": "Is button disabled?",
-          "returns": {
-            "type": "Boolean",
-            "desc": "If true, the button will be disabled"
+        "...commandName": {
+          "type": "Object",
+          "tsType": "QEditorCommand",
+          "autoDefineTsType": true,
+          "desc": "Command definition",
+          "definition": {
+            "label": {
+              "type": "String",
+              "desc": "Label of the button",
+              "examples": [ "Addresses" ]
+            },
+            "tip": {
+              "type": "String",
+              "desc": "Text to be displayed as a tooltip on hover",
+              "examples": [ "Add a contact from the Address Book" ]
+            },
+            "htmlTip": {
+              "type": "String",
+              "desc": "HTML formatted text to be displayed within a tooltip on hover",
+              "examples": [ "Add a <span class=\"red\">user</span> from the address book" ]
+            },
+            "icon": {
+              "type": "String",
+              "desc": "Icon of the button",
+              "examples": [ "fas fa-address-book" ]
+            },
+            "key": {
+              "type": "Number",
+              "desc": "Keycode of a key to be used together with the <ctrl> key for use as a shortcut to trigger this element",
+              "examples": [ "12", "36" ]
+            },
+            "handler": {
+              "type": "Function",
+              "desc": "Either this or \"cmd\" is required. Function for when button gets clicked/tapped.",
+              "params": null,
+              "returns": null,
+              "examples": [ "() => this.uploadFile()" ]
+            },
+            "cmd": {
+              "type": "String",
+              "desc": "Either this or \"handler\" is required. This must be a valid execCommand method according to the designMode API.",
+              "examples": [ "insertHTML", "justifyFull" ]
+            },
+            "param": {
+              "type": "String",
+              "desc": "Only set a param if using a \"cmd\". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.",
+              "examples": [ "<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />" ]
+            },
+            "disable": {
+              "type": [ "Boolean", "Function" ],
+              "desc": "Is button disabled?",
+              "returns": {
+                "type": "Boolean",
+                "desc": "If true, the button will be disabled"
+              },
+              "examples": [ "!user.active", "() => !checkIfUserIsActive()" ]
+            },
+            "type": {
+              "type": "String",
+              "desc": "Pass the value \"no-state\" if the button should not have an \"active\" state",
+              "values": [ null, "no-state" ],
+              "examples": [ "no-state" ]
+            },
+            "fixedLabel": {
+              "type": "Boolean",
+              "desc": "Lock the button label, so it doesn't change based on the child option selected."
+            },
+            "fixedIcon": {
+              "type": "Boolean",
+              "desc": "Lock the button icon, so it doesn't change based on the child option selected."
+            },
+            "highlight": {
+              "type": "Boolean",
+              "desc": "Highlight the toolbar button, when a child option has been selected."
+            }
           },
-          "examples": [ "!user.active", "() => !checkIfUserIsActive()" ]
-        },
-        "type": {
-          "type": "String",
-          "desc": "Pass the value \"no-state\" if the button should not have an \"active\" state",
-          "values": [ null, "no-state" ],
-          "examples": [ "no-state" ]
-        },
-        "fixedLabel": {
-          "type": "Boolean",
-          "desc": "Lock the button label, so it doesn't change based on the child option selected."
-        },
-        "fixedIcon": {
-          "type": "Boolean",
-          "desc": "Lock the button icon, so it doesn't change based on the child option selected."
-        },
-        "highlight": {
-          "type": "Boolean",
-          "desc": "Highlight the toolbar button, when a child option has been selected."
+          "__exemption": [ "examples" ]
         }
       },
       "category": "toolbar"

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -152,13 +152,6 @@ export default createComponent({
       index = newIndex
     }
 
-    // expose public methods
-    const vm = getCurrentInstance()
-    Object.assign(vm.proxy, {
-      poll: () => { poll !== void 0 && poll() },
-      trigger, stop, reset, resume, setIndex
-    })
-
     function setDebounce (val) {
       val = parseInt(val, 10)
 
@@ -217,6 +210,13 @@ export default createComponent({
       updateScrollTarget()
     })
 
+    // expose public methods
+    const vm = getCurrentInstance()
+    Object.assign(vm.proxy, {
+      poll: () => { poll !== void 0 && poll() },
+      trigger, stop, reset, resume, setIndex
+    })
+
     return () => {
       const child = hUniqueSlot(slots.default, [])
 

package/src/components/page-sticky/use-page-sticky.js

@@ -21,8 +21,7 @@ export const usePageStickyProps = {
 }
 
 export default function () {
-  const { props, proxy } = getCurrentInstance()
-  const { $q } = proxy
+  const { props, proxy: { $q } } = getCurrentInstance()
 
   const $layout = inject(layoutKey, () => {
     console.error('QPageSticky needs to be child of QLayout')

package/src/components/popup-edit/QPopupEdit.js

@@ -5,7 +5,7 @@ import QBtn from '../btn/QBtn.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import clone from '../../utils/clone.js'
-import { isDeepEqual } from '../../utils/private/is.js'
+import { isDeepEqual } from '../../utils/is.js'
 import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 export default createComponent({
@@ -135,15 +135,6 @@ export default createComponent({
       emit('hide')
     }
 
-    // expose public methods
-    Object.assign(proxy, {
-      set,
-      cancel,
-      show (e) { menuRef.value !== null && menuRef.value.show(e) },
-      hide (e) { menuRef.value !== null && menuRef.value.hide(e) },
-      updatePosition
-    })
-
     function getContent () {
       const child = slots.default !== void 0
         ? [].concat(slots.default(scope.value))
@@ -173,6 +164,15 @@ export default createComponent({
       return child
     }
 
+    // expose public methods
+    Object.assign(proxy, {
+      set,
+      cancel,
+      show (e) { menuRef.value !== null && menuRef.value.show(e) },
+      hide (e) { menuRef.value !== null && menuRef.value.hide(e) },
+      updatePosition
+    })
+
     return () => {
       if (props.disable === true) { return }
 

package/src/components/popup-proxy/QPopupProxy.js

@@ -49,13 +49,6 @@ export default createComponent({
       }
     })
 
-    // expose public methods
-    Object.assign(proxy, {
-      show (evt) { canShow(evt) === true && popupRef.value.show(evt) },
-      hide (evt) { popupRef.value.hide(evt) },
-      toggle (evt) { popupRef.value.toggle(evt) }
-    })
-
     function onShow (evt) {
       showing.value = true
       emit('show', evt)
@@ -67,6 +60,13 @@ export default createComponent({
       emit('hide', evt)
     }
 
+    // expose public methods
+    Object.assign(proxy, {
+      show (evt) { canShow(evt) === true && popupRef.value.show(evt) },
+      hide (evt) { popupRef.value.hide(evt) },
+      toggle (evt) { popupRef.value.toggle(evt) }
+    })
+
     return () => {
       const data = {
         ref: popupRef,

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -155,9 +155,6 @@ export default createComponent({
       }, 300)
     }
 
-    // expose public methods
-    Object.assign(proxy, { trigger, updateScrollTarget })
-
     let $el, localScrollTarget, timer
 
     function updateScrollTarget () {
@@ -175,6 +172,9 @@ export default createComponent({
       clearTimeout(timer)
     })
 
+    // expose public methods
+    Object.assign(proxy, { trigger, updateScrollTarget })
+
     return () => {
       const child = [
         h('div', { class: contentClass.value }, hSlot(slots.default)),

package/src/components/range/QRange.js

@@ -327,7 +327,11 @@ export default createComponent({
 
       const
         stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
-        offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal
+        offset = (
+          ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
+          * (state.isReversed.value === true ? -1 : 1)
+          * (props.vertical === true ? -1 : 1) * stepVal
+        )
 
       if (state.focus.value === 'both') {
         const interval = model.value.max - model.value.min

package/src/components/resize-observer/QResizeObserver.js

@@ -53,17 +53,14 @@ export default createComponent({
       }
     }
 
-    const vm = getCurrentInstance()
-
-    // expose public methods
-    Object.assign(vm.proxy, { trigger })
+    const { proxy } = getCurrentInstance()
 
     if (hasObserver === true) {
       let observer
 
       onMounted(() => {
         nextTick(() => {
-          targetEl = vm.proxy.$el.parentNode
+          targetEl = proxy.$el.parentNode
 
           if (targetEl) {
             observer = new ResizeObserver(trigger)
@@ -117,13 +114,16 @@ export default createComponent({
 
       onMounted(() => {
         nextTick(() => {
-          targetEl = vm.proxy.$el
+          targetEl = proxy.$el
           targetEl && onObjLoad()
         })
       })
 
       onBeforeUnmount(cleanup)
 
+      // expose public method
+      proxy.trigger = trigger
+
       return () => {
         if (canRender.value === true) {
           return h('object', {

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

@@ -84,9 +84,9 @@ export default createComponent({
       }
     }
 
-    const vm = getCurrentInstance()
+    const { proxy } = getCurrentInstance()
 
-    const isDark = useDark(props, vm.proxy.$q)
+    const isDark = useDark(props, proxy.$q)
 
     let timer, panRefPos
 
@@ -221,7 +221,7 @@ export default createComponent({
     // multiple times
     const emitScroll = debounce(() => {
       const info = getScroll()
-      info.ref = vm.proxy
+      info.ref = proxy
       emit('scroll', info)
     }, 0)
 
@@ -360,28 +360,6 @@ export default createComponent({
       hover.value = false
     }
 
-    // expose public methods
-    Object.assign(vm.proxy, {
-      getScrollTarget: () => targetRef.value,
-      getScroll,
-      getScrollPosition: () => ({
-        top: scroll.vertical.position.value,
-        left: scroll.horizontal.position.value
-      }),
-      getScrollPercentage: () => ({
-        top: scroll.vertical.percentage.value,
-        left: scroll.horizontal.percentage.value
-      }),
-      setScrollPosition: localSetScrollPosition,
-      setScrollPercentage (axis, percentage, duration) {
-        localSetScrollPosition(
-          axis,
-          percentage * (scroll[ axis ].size.value - container[ axis ].value),
-          duration
-        )
-      }
-    })
-
     let scrollPosition = null
 
     onDeactivated(() => {
@@ -404,6 +382,28 @@ export default createComponent({
 
     onBeforeUnmount(emitScroll.cancel)
 
+    // expose public methods
+    Object.assign(proxy, {
+      getScrollTarget: () => targetRef.value,
+      getScroll,
+      getScrollPosition: () => ({
+        top: scroll.vertical.position.value,
+        left: scroll.horizontal.position.value
+      }),
+      getScrollPercentage: () => ({
+        top: scroll.vertical.percentage.value,
+        left: scroll.horizontal.percentage.value
+      }),
+      setScrollPosition: localSetScrollPosition,
+      setScrollPercentage (axis, percentage, duration) {
+        localSetScrollPosition(
+          axis,
+          percentage * (scroll[ axis ].size.value - container[ axis ].value),
+          duration
+        )
+      }
+    })
+
     return () => {
       return h('div', {
         class: classes.value,

package/src/components/scroll-observer/QScrollObserver.js

@@ -117,10 +117,10 @@ export default createComponent({
       }
     }
 
-    const vm = getCurrentInstance()
+    const { proxy } = getCurrentInstance()
 
     onMounted(() => {
-      parentEl = vm.proxy.$el.parentNode
+      parentEl = proxy.$el.parentNode
       configureScrollTarget()
     })
 
@@ -130,7 +130,7 @@ export default createComponent({
     })
 
     // expose public methods
-    Object.assign(vm.proxy, {
+    Object.assign(proxy, {
       trigger,
       getPosition: () => scroll
     })

package/src/components/select/QSelect.js

@@ -17,7 +17,7 @@ import { useFormProps, useFormInputNameAttr } from '../../composables/private/us
 import useKeyComposition from '../../composables/private/use-key-composition.js'
 
 import { createComponent } from '../../utils/private/create.js'
-import { isDeepEqual } from '../../utils/private/is.js'
+import { isDeepEqual } from '../../utils/is.js'
 import { stop, prevent, stopAndPrevent } from '../../utils/event.js'
 import { normalizeToInterval } from '../../utils/format.js'
 import { shouldIgnoreKey, isKeyCode } from '../../utils/private/key-composition.js'
@@ -1513,6 +1513,7 @@ export default createComponent({
               h('input', {
                 class: 'q-select__autocomplete-input',
                 autocomplete: props.autocomplete,
+                tabindex: -1,
                 onKeyup: onTargetAutocomplete
               })
             )

package/src/components/slider/QSlider.js

@@ -134,7 +134,11 @@ export default createComponent({
 
       const
         stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
-        offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal
+        offset = (
+          ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
+          * (state.isReversed.value === true ? -1 : 1)
+          * (props.vertical === true ? -1 : 1) * stepVal
+        )
 
       model.value = between(
         parseFloat((model.value + offset).toFixed(state.decimals.value)),

package/src/components/slider/use-slider.js

@@ -7,7 +7,7 @@ import { useFormProps, useFormInject } from '../../composables/private/use-form.
 
 import { between } from '../../utils/format.js'
 import { position } from '../../utils/event.js'
-import { isNumber, isObject } from '../../utils/private/is.js'
+import { isNumber, isObject } from '../../utils/is.js'
 import { hDir } from '../../utils/private/render.js'
 
 const markerPrefixClass = 'q-slider__marker-labels'

package/src/components/table/QTable.json

@@ -1971,56 +1971,9 @@
               }
             },
             "filter": {
-              "type": "Function",
-              "required": true,
-              "desc": "Filter method (the 'filter-method' prop)",
-              "params": {
-                "rows": {
-                  "type": "Array",
-                  "required": true,
-                  "desc": "Array of rows",
-                  "__exemption": [ "examples" ]
-                },
-                "terms": {
-                  "type": [ "String", "Object" ],
-                  "required": true,
-                  "desc": "Terms to filter with (is essentially the 'filter' prop value)",
-                  "__exemption": [ "examples" ]
-                },
-                "cols": {
-                  "type": "Array",
-                  "desc": "Optional column definitions",
-                  "__exemption": [ "examples" ]
-                },
-                "getCellValue": {
-                  "type": "Function",
-                  "desc": "Optional function to get a cell value",
-                  "params": {
-                    "col": {
-                      "type": "Object",
-                      "required": true,
-                      "desc": "Column name from column definitions",
-                      "__exemption": [ "examples" ]
-                    },
-                    "row": {
-                      "type": "Object",
-                      "required": true,
-                      "desc": "The row object",
-                      "__exemption": [ "examples" ]
-                    }
-                  },
-                  "returns": {
-                    "type": "Any",
-                    "desc": "Parsed/Processed cell value",
-                    "examples": [ "Ice Cream Sandwich" ]
-                  }
-                }
-              },
-              "returns": {
-                "type": "Array",
-                "desc": "Filtered rows",
-                "__exemption": [ "examples" ]
-              }
+              "type": [ "String", "Object" ],
+              "desc": "String/Object to filter table with (the 'filter' prop)",
+              "__exemption": [ "examples" ]
             },
             "getCellValue": {
               "type": "Function",
@@ -2220,6 +2173,11 @@
                   "type": "Number",
                   "desc": "How many rows per page? 0 means Infinite",
                   "examples": [ 10 ]
+                },
+                "rowsNumber": {
+                  "type": "Number",
+                  "desc": "For server-side fetching only. How many total database rows are there to be added to the table.",
+                  "examples": [ 100, 200 ]
                 }
               }
             },
@@ -2414,5 +2372,25 @@
         }
       }
     }
+  },
+
+  "computedProps": {
+    "filteredSortedRows": {
+      "desc": "The filtered and sorted rows (same as the rows prop if using server-side fetching)",
+      "type": "Array",
+      "examples": [ "[ { name: 'Ice Cream Sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, sodium: 129, calcium: 8, iron: 1 }, ... ]" ]
+    },
+
+    "computedRows": {
+      "desc": "Paginated, filtered, and sorted rows (same as the rows prop if using server-side fetching)",
+      "type": "Array",
+      "examples": [ "[ { name: 'Ice Cream Sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, sodium: 129, calcium: 8, iron: 1 }, ... ]" ]
+    },
+
+    "computedRowsNumber": {
+      "desc": "The number of computed rows",
+      "type": "Number",
+      "examples": [ 10 ]
+    }
   }
 }

package/src/components/table/table-column-selection.js

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 
-import { isNumber } from '../../utils/private/is.js'
+import { isNumber } from '../../utils/is.js'
 
 export const useTableColumnSelectionProps = {
   visibleColumns: Array

package/src/components/table/table-pagination.js

@@ -64,10 +64,6 @@ export function useTablePaginationState (vm, getCellValue) {
     nextTick(() => {
       emit('request', {
         pagination: prop.pagination || computedPagination.value,
-        // FIXME: 'props.filter' is string/object, but 'prop.filter' can be controlled by the user, and the docs are suggesting 'prop.filter' is a function
-        // So, value of 'filter' becomes function/string/object, which makes a lot of things unpredictable and can break things
-        // Either update the docs to say 'prop.filter' should be a string/object, or use 'prop.filter || props.filterMethod' or maybe get 'computedFilterFunction' here and use that instead of 'props.filterMethod'
-        // The examples on our docs are using 'filter' as a string in onRequest handler, but the JSON API is saying 'filter' is a function
         filter: prop.filter || props.filter,
         getCellValue
       })

package/src/components/table/table-sort.js

@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 
 import { sortDate } from '../../utils/private/sort.js'
-import { isNumber, isDate, isObject } from '../../utils/private/is.js'
+import { isNumber, isDate, isObject } from '../../utils/is.js'
 
 export const useTableSortProps = {
   sortMethod: Function,

package/src/components/time/QTime.js

@@ -71,7 +71,8 @@ export default createComponent({
   emits: useDatetimeEmits,
 
   setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+    const vm = getCurrentInstance()
+    const { $q } = vm.proxy
 
     const isDark = useDark(props, $q)
     const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(props, $q)
@@ -759,10 +760,6 @@ export default createComponent({
       emit('update:modelValue', val, date)
     }
 
-    // expose public methods
-    const vm = getCurrentInstance()
-    Object.assign(vm.proxy, { setNow })
-
     function getHeader () {
       const label = [
         h('div', {
@@ -900,6 +897,9 @@ export default createComponent({
       ])
     }
 
+    // expose public method
+    vm.proxy.setNow = setNow
+
     return () => {
       const child = [ getClock() ]
 

package/src/components/tree/QTree.js

@@ -671,6 +671,8 @@ export default createComponent({
       }
     }
 
+    props.defaultExpandAll === true && expandAll()
+
     // expose public methods
     Object.assign(proxy, {
       getNodeByKey,
@@ -684,8 +686,6 @@ export default createComponent({
       setTicked
     })
 
-    props.defaultExpandAll === true && expandAll()
-
     return () => {
       const children = getChildren(props.nodes)