quasar 2.9.1 → 2.10.0

package/src/components/pagination/QPagination.json

@@ -12,7 +12,7 @@
     },
 
     "min": {
-      "type": "Number",
+      "type": [ "Number", "String" ],
       "desc": "Minimum page (must be lower than 'max')",
       "default": 1,
       "examples": [ 3 ],
@@ -20,58 +20,18 @@
     },
 
     "max": {
-      "type": "Number",
+      "type": [ "Number", "String" ],
       "desc": "Number of last page (must be higher than 'min')",
       "required": true,
       "examples": [ 10 ],
       "category": "model"
     },
 
-    "color": {
-      "extends": "color",
-      "default": "primary"
-    },
-
-    "text-color": {
-      "extends": "text-color"
-    },
-
-    "active-color": {
-      "extends": "color",
-      "default": "primary"
-    },
-
-    "active-text-color": {
-      "extends": "text-color"
-    },
-
     "dark": {
       "extends": "dark",
       "desc": "Notify the component that the background is a dark color (useful when you are using it along with the 'input' prop)"
     },
 
-    "input-style": {
-      "type": [ "String", "Array", "Object" ],
-      "tsType": "VueStyleProp",
-      "desc": "Style definitions to be attributed to the input (if using one)",
-      "examples": [
-        "background-color: #ff0000",
-        ":input-style=\"{ backgroundColor: '#ff0000' }\""
-      ],
-      "category": "style"
-    },
-
-    "input-class": {
-      "type": [ "String", "Array", "Object" ],
-      "tsType": "VueClassProp",
-      "desc": "Class definitions to be attributed to the input (if using one)",
-      "examples": [
-        "my-special-class",
-        ":input-class=\"{ 'my-special-class': <condition> }\""
-      ],
-      "category": "style"
-    },
-
     "size": {
       "type": "String",
       "desc": "Button size in CSS units, including unit name",
@@ -149,54 +109,76 @@
     },
 
     "max-pages": {
-      "type": "Number",
+      "type": [ "Number", "String" ],
       "default": 0,
       "desc": "Maximum number of page links to display at a time; 0 means Infinite",
       "examples": [ 5 ],
-      "category": "model"
+      "category": "content"
     },
 
-    "ripple": {
-      "type": [ "Boolean", "Object" ],
-      "desc": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons",
-      "default": true,
-      "examples": [ false, "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
+    "flat": {
+      "type": "Boolean",
+      "desc": "Use 'flat' design for non-active buttons (it's the default option)",
       "category": "style"
     },
 
-    "round": {
+    "outline": {
       "type": "Boolean",
-      "desc": "Makes a circle shaped button for all buttons",
+      "desc": "Use 'outline' design for non-active buttons",
       "category": "style"
     },
 
-    "rounded": {
+    "unelevated": {
       "type": "Boolean",
-      "desc": "Applies a more prominent border-radius for a squared shape button for all buttons",
+      "desc": "Remove shadow for non-active buttons",
       "category": "style"
     },
 
-    "flat": {
+    "push": {
       "type": "Boolean",
-      "desc": "Use 'flat' design for current page button",
+      "desc": "Use 'push' design for non-active buttons",
       "category": "style"
     },
 
-    "outline": {
-      "type": "Boolean",
-      "desc": "Use 'outline' design for current page button",
-      "category": "style"
+    "color": {
+      "extends": "color",
+      "desc": "Color name from the Quasar Color Palette for the non-active buttons",
+      "default": "primary"
     },
 
-    "unelevated": {
+    "text-color": {
+      "extends": "text-color",
+      "desc": "Text color name from the Quasar Color Palette for the ACTIVE buttons"
+    },
+
+    "active-design": {
+      "type": "String",
+      "desc": "The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)",
+      "values": [ "flat", "outline", "push", "unelevated" ],
+      "category": "style",
+      "addedIn": "v2.10"
+    },
+
+    "active-color": {
+      "extends": "color",
+      "desc": "Color name from the Quasar Color Palette for the ACTIVE button",
+      "default": "primary"
+    },
+
+    "active-text-color": {
+      "extends": "text-color",
+      "desc": "Text color name from the Quasar Color Palette for the ACTIVE button"
+    },
+
+    "round": {
       "type": "Boolean",
-      "desc": "Remove shadow for current page button",
+      "desc": "Makes a circle shaped button for all buttons",
       "category": "style"
     },
 
-    "push": {
+    "rounded": {
       "type": "Boolean",
-      "desc": "Use 'push' design for current page button",
+      "desc": "Applies a more prominent border-radius for a squared shape button for all buttons",
       "category": "style"
     },
 
@@ -206,8 +188,13 @@
       "category": "style"
     },
 
-    "dense": {
-      "extends": "dense"
+    "gutter": {
+      "type": "String",
+      "desc": "Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)",
+      "default": "2px",
+      "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg", "2px 2px 5px 7px" ],
+      "category": "style",
+      "addedIn": "v2.10"
     },
 
     "padding": {
@@ -215,6 +202,36 @@
       "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
       "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg", "2px 2px 5px 7px" ],
       "category": "style"
+    },
+
+    "input-style": {
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
+      "desc": "Style definitions to be attributed to the input (if using one)",
+      "examples": [
+        "background-color: #ff0000",
+        ":input-style=\"{ backgroundColor: '#ff0000' }\""
+      ],
+      "category": "style"
+    },
+
+    "input-class": {
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
+      "desc": "Class definitions to be attributed to the input (if using one)",
+      "examples": [
+        "my-special-class",
+        ":input-class=\"{ 'my-special-class': <condition> }\""
+      ],
+      "category": "style"
+    },
+
+    "ripple": {
+      "type": [ "Boolean", "Object" ],
+      "desc": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons",
+      "default": true,
+      "examples": [ false, "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
+      "category": "style"
     }
   },
 

package/src/components/pagination/QPagination.sass

@@ -1,3 +1,4 @@
+
 .q-pagination
   input
     text-align: center
@@ -7,3 +8,16 @@
   input::-webkit-inner-spin-button
     -webkit-appearance: none
     margin: 0
+
+  &__content
+    --q-pagination-gutter-parent: -2px
+    --q-pagination-gutter-child: 2px
+
+    margin-top: var(--q-pagination-gutter-parent)
+    margin-left: var(--q-pagination-gutter-parent)
+
+  &__content > .q-btn,
+  &__content > .q-input,
+  &__middle > .q-btn
+    margin-top: var(--q-pagination-gutter-child)
+    margin-left: var(--q-pagination-gutter-child)

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

@@ -111,10 +111,7 @@ export default createComponent({
 
     const directives = computed(() => {
       // if props.disable === false
-      const modifiers = {
-        down: true,
-        mightPrevent: true
-      }
+      const modifiers = { down: true }
 
       if (props.noMouse !== true) {
         modifiers.mouse = true

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

@@ -58,17 +58,21 @@ export default createComponent({
     if (hasObserver === true) {
       let observer
 
-      onMounted(() => {
-        nextTick(() => {
-          targetEl = proxy.$el.parentNode
+      // initialize as soon as possible
+      const init = stop => {
+        targetEl = proxy.$el.parentNode
 
-          if (targetEl) {
-            observer = new ResizeObserver(trigger)
-            observer.observe(targetEl)
-            emitEvent()
-          }
-        })
-      })
+        if (targetEl) {
+          observer = new ResizeObserver(trigger)
+          observer.observe(targetEl)
+          emitEvent()
+        }
+        else if (stop !== true) {
+          nextTick(() => { init(true) })
+        }
+      }
+
+      onMounted(() => { init() })
 
       onBeforeUnmount(() => {
         clearTimeout(timer)

package/src/components/stepper/QStep.js

@@ -7,7 +7,7 @@ import { usePanelChildProps } from '../../composables/private/use-panel.js'
 import useCache from '../../composables/private/use-cache.js'
 
 import { createComponent } from '../../utils/private/create.js'
-import { stepperKey } from '../../utils/private/symbols.js'
+import { stepperKey, emptyRenderFn } from '../../utils/private/symbols.js'
 import { hSlot } from '../../utils/private/render.js'
 
 function getStepWrapper (slots) {
@@ -61,9 +61,11 @@ export default createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $stepper = inject(stepperKey, () => {
-      console.error('QStep needs to be child of QStepper')
-    })
+    const $stepper = inject(stepperKey, emptyRenderFn)
+    if ($stepper === emptyRenderFn) {
+      console.error('QStep needs to be a child of QStepper')
+      return emptyRenderFn
+    }
 
     const { getCacheWithFn } = useCache()
 
@@ -121,7 +123,7 @@ export default createComponent({
 
     return () => h(
       'div',
-      { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
+      { ref: rootRef, class: 'q-stepper__step', role: 'tabpanel', ...scrollEvent.value },
       $stepper.value.vertical === true
         ? [
             h(StepHeader, {

package/src/components/tab-panels/QTabPanel.js

@@ -11,6 +11,6 @@ export default createComponent({
   props: usePanelChildProps,
 
   setup (_, { slots }) {
-    return () => h('div', { class: 'q-tab-panel' }, hSlot(slots.default))
+    return () => h('div', { class: 'q-tab-panel', role: 'tabpanel' }, hSlot(slots.default))
   }
 })

package/src/components/tabs/QTabs.js

@@ -572,8 +572,8 @@ export default createComponent({
 
       recalculateScroll()
 
-      // if it's a QTab
-      if (tabData.routeData === void 0) {
+      // if it's a QTab or we don't have Vue Router
+      if (tabData.routeData === void 0 || proxy.$route === void 0) {
         // we should position to the currently active tab (if any)
         registerScrollToTabTimeout(() => {
           if (scrollable.value === true) {
@@ -597,13 +597,6 @@ export default createComponent({
       }
     }
 
-    /*
-     * Vue has an aggressive diff (in-place replacement) so we cannot
-     * ensure that the instance getting destroyed is the actual tab
-     * reported here. As a result, we cannot use its name or check
-     * if it's a route one to make the necessary updates. We need to
-     * always check the existing list again and infer the changes.
-     */
     function unregisterTab (tabData) {
       tabDataList.splice(tabDataList.indexOf(tabData), 1)
       tabDataListLen.value--

package/src/components/tabs/QTabs.json

@@ -77,7 +77,7 @@
       "desc": "The class to be set on the active tab",
       "examples": [ "my-active-class" ],
       "category": "style",
-      "addedIn": "2.1.4"
+      "addedIn": "v2.1.4"
     },
 
     "left-icon": {

package/src/components/tabs/use-tab.js

@@ -6,7 +6,7 @@ import Ripple from '../../directives/Ripple.js'
 
 import { hMergeSlot } from '../../utils/private/render.js'
 import { isKeyCode, shouldIgnoreKey } from '../../utils/private/key-composition.js'
-import { tabsKey } from '../../utils/private/symbols.js'
+import { tabsKey, emptyRenderFn } from '../../utils/private/symbols.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import uid from '../../utils/uid.js'
 import { isDeepEqual } from '../../utils/is.js'
@@ -41,9 +41,11 @@ export const useTabProps = {
 }
 
 export default function (props, slots, emit, routeData) {
-  const $tabs = inject(tabsKey, () => {
+  const $tabs = inject(tabsKey, emptyRenderFn)
+  if ($tabs === emptyRenderFn) {
     console.error('QTab/QRouteTab component needs to be child of QTabs')
-  })
+    return emptyRenderFn
+  }
 
   const { proxy } = getCurrentInstance()
 

package/src/components/timeline/QTimelineEntry.js

@@ -4,7 +4,7 @@ import QIcon from '../icon/QIcon.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hUniqueSlot } from '../../utils/private/render.js'
-import { timelineKey } from '../../utils/private/symbols.js'
+import { timelineKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QTimelineEntry',
@@ -32,9 +32,11 @@ export default createComponent({
   },
 
   setup (props, { slots }) {
-    const $timeline = inject(timelineKey, () => {
+    const $timeline = inject(timelineKey, emptyRenderFn)
+    if ($timeline === emptyRenderFn) {
       console.error('QTimelineEntry needs to be child of QTimeline')
-    })
+      return emptyRenderFn
+    }
 
     const classes = computed(() =>
       `q-timeline__entry q-timeline__entry--${ props.side }`

package/src/components/toolbar/QToolbar.js

@@ -16,6 +16,6 @@ export default createComponent({
       + (props.inset === true ? ' q-toolbar--inset' : '')
     )
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h('div', { class: classes.value, role: 'toolbar' }, hSlot(slots.default))
   }
 })

package/src/components/tooltip/QTooltip.js

@@ -285,7 +285,7 @@ export default createComponent({
             attrs.style,
             transitionStyle.value
           ],
-          role: 'complementary'
+          role: 'tooltip'
         }, hSlot(slots.default))
         : null
     }

package/src/components/tree/QTree.js

@@ -68,6 +68,7 @@ export default createComponent({
 
     duration: Number,
     noConnectors: Boolean,
+    noTransition: Boolean,
 
     noNodesLabel: String,
     noResultsLabel: String
@@ -140,7 +141,6 @@ export default createComponent({
         const
           key = node[ props.nodeKey ],
           isParent = node[ props.childrenKey ] && node[ props.childrenKey ].length > 0,
-          isLeaf = isParent !== true,
           selectable = node.disabled !== true && hasSelection.value === true && node.selectable !== false,
           expandable = node.disabled !== true && node.expandable !== false,
           hasTicking = tickStrategy !== 'none',
@@ -166,7 +166,6 @@ export default createComponent({
           key,
           parent,
           isParent,
-          isLeaf,
           lazy: localLazy,
           disabled: node.disabled,
           link: node.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
@@ -186,7 +185,7 @@ export default createComponent({
           leafTicking,
           ticked: strictTicking === true
             ? innerTicked.value.includes(key)
-            : (isLeaf === true ? innerTicked.value.includes(key) : false)
+            : (isParent === true ? false : innerTicked.value.includes(key))
         }
 
         meta[ key ] = m
@@ -586,23 +585,37 @@ export default createComponent({
         ]),
 
         isParent === true
-          ? h(QSlideTransition, {
-            duration: props.duration,
-            onShow,
-            onHide
-          }, () => withDirectives(
-            h('div', {
-              class: 'q-tree__node-collapsible' + textColorClass.value,
-              key: `${ key }__q`
-            }, [
-              body,
-              h('div', {
-                class: 'q-tree__children'
-                  + (m.disabled === true ? ' q-tree__node--disabled' : '')
-              }, children)
-            ]),
-            [ [ vShow, m.expanded ] ]
-          ))
+          ? (
+              props.noTransition === true
+                ? h('div', {
+                  class: 'q-tree__node-collapsible' + textColorClass.value,
+                  key: `${ key }__q`
+                }, [
+                  body,
+                  h('div', {
+                    class: 'q-tree__children'
+                      + (m.disabled === true ? ' q-tree__node--disabled' : '')
+                  }, m.expanded ? children : null)
+                ])
+
+                : h(QSlideTransition, {
+                  duration: props.duration,
+                  onShow,
+                  onHide
+                }, () => withDirectives(
+                  h('div', {
+                    class: 'q-tree__node-collapsible' + textColorClass.value,
+                    key: `${ key }__q`
+                  }, [
+                    body,
+                    h('div', {
+                      class: 'q-tree__children'
+                        + (m.disabled === true ? ' q-tree__node--disabled' : '')
+                    }, children)
+                  ]),
+                  [ [ vShow, m.expanded ] ]
+                ))
+            )
           : body
       ])
     }

package/src/components/tree/QTree.json

@@ -126,6 +126,13 @@
       "category": "behavior"
     },
 
+    "no-transition": {
+      "type": "Boolean",
+      "desc": "Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees",
+      "category": "behavior",
+      "addedIn": "v2.9.2"
+    },
+
     "filter": {
       "type": "String",
       "desc": "The text value to be used for filtering nodes",

package/src/components/uploader/QUploaderAddTrigger.js

@@ -1,14 +1,18 @@
 import { inject } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
-import { uploaderKey } from '../../utils/private/symbols.js'
+import { uploaderKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QUploaderAddTrigger',
 
   setup () {
-    return inject(uploaderKey, () => {
+    const $trigger = inject(uploaderKey, emptyRenderFn)
+
+    if ($trigger === emptyRenderFn) {
       console.error('QUploaderAddTrigger needs to be child of QUploader')
-    })
+    }
+
+    return $trigger
   }
 })

package/src/composables/private/use-file.js

@@ -1,5 +1,6 @@
 import { h, ref, computed, getCurrentInstance } from 'vue'
 
+import { client } from '../../plugins/Platform.js'
 import { stop, stopAndPrevent } from '../../utils/event.js'
 
 function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
@@ -187,7 +188,14 @@ export default function ({
 
   function onDragleave (e) {
     stopAndPrevent(e)
-    e.relatedTarget !== dndRef.value && (dnd.value = false)
+
+    // Safari bug: relatedTarget is null for over 10 years
+    // https://bugs.webkit.org/show_bug.cgi?id=66547
+    const gone = e.relatedTarget !== null || client.is.safari !== true
+      ? e.relatedTarget !== dndRef.value
+      : document.elementsFromPoint(e.clientX, e.clientY).includes(dndRef.value) === false
+
+    gone === true && (dnd.value = false)
   }
 
   function onDrop (e) {
@@ -221,6 +229,7 @@ export default function ({
     pickFiles,
     addFiles,
     onDragover,
+    onDragleave,
     processFiles,
     getDndNode,
 

package/src/directives/TouchHold.js

@@ -126,9 +126,16 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         el.__qtouchhold = ctx
 
-        modifiers.mouse === true && addEvt(ctx, 'main', [
-          [ el, 'mousedown', 'mouseStart', `passive${ modifiers.mouseCapture === true ? 'Capture' : '' }` ]
-        ])
+        if (modifiers.mouse === true) {
+          // account for UMD too where modifiers will be lowercased to work
+          const capture = modifiers.mouseCapture === true || modifiers.mousecapture === true
+            ? 'Capture'
+            : ''
+
+          addEvt(ctx, 'main', [
+            [ el, 'mousedown', 'mouseStart', `passive${ capture }` ]
+          ])
+        }
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],