quasar 2.15.3 → 2.16.0

package/src/components/tooltip/QTooltip.js

@@ -1,6 +1,6 @@
 import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
-import useAnchor, { useAnchorProps } from '../../composables/private.use-anchor/use-anchor.js'
+import useAnchor, { useAnchorStaticProps } from '../../composables/private.use-anchor/use-anchor.js'
 import useScrollTarget from '../../composables/private.use-scroll-target/use-scroll-target.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private.use-model-toggle/use-model-toggle.js'
 import usePortal from '../../composables/private.use-portal/use-portal.js'
@@ -9,7 +9,7 @@ import useTick from '../../composables/use-tick/use-tick.js'
 import useTimeout from '../../composables/use-timeout/use-timeout.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { getScrollTarget } from '../../utils/scroll/scroll.js'
+import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { stopAndPrevent, addEvt, cleanEvt } from '../../utils/event/event.js'
 import { clearSelection } from '../../utils/private.selection/selection.js'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -24,7 +24,7 @@ export default createComponent({
   inheritAttrs: false,
 
   props: {
-    ...useAnchorProps,
+    ...useAnchorStaticProps,
     ...useModelToggleProps,
     ...useTransitionProps,
 
@@ -38,9 +38,11 @@ export default createComponent({
     },
 
     transitionShow: {
+      ...useTransitionProps.transitionShow,
       default: 'jump-down'
     },
     transitionHide: {
+      ...useTransitionProps.transitionHide,
       default: 'jump-up'
     },
 
@@ -60,9 +62,7 @@ export default createComponent({
       validator: validateOffset
     },
 
-    scrollTarget: {
-      default: void 0
-    },
+    scrollTarget: scrollTargetProp,
 
     delay: {
       type: Number,

package/src/components/tooltip/QTooltip.json

@@ -1,5 +1,10 @@
 {
-  "mixins": [ "composables/private.use-model-toggle/use-model-toggle", "composables/private.use-portal/use-portal", "composables/private.use-transition/use-transition" ],
+  "mixins": [
+    "composables/private.use-model-toggle/use-model-toggle",
+    "composables/private.use-anchor/use-anchor-static",
+    "composables/private.use-portal/use-portal",
+    "composables/private.use-transition/use-transition"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/tooltip"
@@ -66,20 +71,6 @@
       "extends": "scroll-target"
     },
 
-    "target": {
-      "type": [ "Boolean", "String" ],
-      "desc": "Configure a target element to trigger Tooltip toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)",
-      "default": "true",
-      "examples": [ "# :target=\"false\"", "# target=\".my-parent\"" ],
-      "category": "behavior"
-    },
-
-    "no-parent-event": {
-      "type": "Boolean",
-      "desc": "Skips attaching events to the target DOM element (that trigger the element to get shown)",
-      "category": "behavior"
-    },
-
     "delay": {
       "type": "Number",
       "desc": "Configure Tooltip to appear with delay",

package/src/components/tree/QTree.js

@@ -66,7 +66,7 @@ export default createComponent({
     filter: String,
     filterMethod: Function,
 
-    duration: Number,
+    duration: {},
     noConnectors: Boolean,
     noTransition: Boolean,
 

package/src/components/tree/QTree.json

@@ -143,7 +143,6 @@
     "filter-method": {
       "type": "Function",
       "desc": "The function to use to filter the tree nodes; For best performance, reference it from your scope and do not define it inline",
-      "default": "# see source code",
       "params": {
         "node": {
           "type": "Object",
@@ -158,6 +157,7 @@
         "type": "Boolean",
         "desc": "Matches or not"
       },
+      "examples": [ "(node, filter) => node.label.toLowerCase().indexOf(filter.toLowerCase()) !== -1" ],
       "category": "filter"
     },
 
@@ -165,6 +165,7 @@
       "type": "Number",
       "desc": "Toggle animation duration (in milliseconds)",
       "default": "300",
+      "passthrough": "child",
       "category": "style"
     },
 

package/src/components/uploader/xhr-uploader-plugin.js

@@ -16,9 +16,7 @@ const props = {
   },
   fieldName: {
     type: [ Function, String ],
-    default: () => {
-      return file => file.name
-    }
+    default: () => file => file.name
   },
   headers: [ Function, Array ],
   formFields: [ Function, Array ],

package/src/components/video/QVideo.test.js

@@ -6,10 +6,6 @@ import QVideo from './QVideo.js'
 describe('[QVideo API]', () => {
   describe('[Props]', () => {
     describe('[(prop)ratio]', () => {
-      test('is defined correctly', () => {
-        expect(QVideo.props.ratio).toBeDefined()
-      })
-
       test.each([
         [ 'String', '5' ],
         [ 'Number', 5 ]
@@ -36,10 +32,6 @@ describe('[QVideo API]', () => {
     })
 
     describe('[(prop)src]', () => {
-      test('is defined correctly', () => {
-        expect(QVideo.props.src).toBeDefined()
-      })
-
       test('type String has effect', () => {
         const propVal = 'https://www.youtube.com/embed/k3_tw44QsZQ'
         const wrapper = mount(QVideo, {
@@ -56,10 +48,6 @@ describe('[QVideo API]', () => {
     })
 
     describe('[(prop)title]', () => {
-      test('is defined correctly', () => {
-        expect(QVideo.props.title).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const wrapper = mount(QVideo, {
           props: {
@@ -84,10 +72,6 @@ describe('[QVideo API]', () => {
     })
 
     describe('[(prop)fetchpriority]', () => {
-      test('is defined correctly', () => {
-        expect(QVideo.props.fetchpriority).toBeDefined()
-      })
-
       test.each([
         [ 'high' ],
         [ 'low' ],
@@ -115,10 +99,6 @@ describe('[QVideo API]', () => {
     })
 
     describe('[(prop)loading]', () => {
-      test('is defined correctly', () => {
-        expect(QVideo.props.loading).toBeDefined()
-      })
-
       test.each([
         [ 'eager' ],
         [ 'lazy' ]
@@ -145,10 +125,6 @@ describe('[QVideo API]', () => {
     })
 
     describe('[(prop)referrerpolicy]', () => {
-      test('is defined correctly', () => {
-        expect(QVideo.props.referrerpolicy).toBeDefined()
-      })
-
       test.each([
         [ 'no-referrer' ],
         [ 'no-referrer-when-downgrade' ],

package/src/components/virtual-scroll/QVirtualScroll.js

@@ -7,7 +7,7 @@ import getTableMiddle from '../table/get-table-middle.js'
 import { useVirtualScroll, useVirtualScrollProps } from './use-virtual-scroll.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { getScrollTarget } from '../../utils/scroll/scroll.js'
+import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { listenOpts } from '../../utils/event/event.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
 
@@ -38,9 +38,7 @@ export default createComponent({
     itemsFn: Function,
     itemsSize: Number,
 
-    scrollTarget: {
-      default: void 0
-    }
+    scrollTarget: scrollTargetProp
   },
 
   setup (props, { slots, attrs }) {

package/src/components/virtual-scroll/QVirtualScroll.json

@@ -28,7 +28,6 @@
     "items-size": {
       "type": "Number",
       "desc": "Number of available items in the list; Required and used only if 'itemsFn' is provided",
-      "default": "# void 0",
       "examples": [ "100000" ],
       "category": "content"
     },

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -193,7 +193,7 @@ function sumSize (sizeAgg, size, from, to) {
 const commonVirtScrollProps = {
   virtualScrollSliceSize: {
     type: [ Number, String ],
-    default: null
+    default: 10
   },
 
   virtualScrollSliceRatioBefore: {
@@ -224,7 +224,7 @@ const commonVirtScrollProps = {
   tableColspan: [ Number, String ]
 }
 
-export const commonVirtPropsList = Object.keys(commonVirtScrollProps)
+export const commonVirtScrollPropsList = Object.keys(commonVirtScrollProps)
 
 export const useVirtualScrollProps = {
   virtualScrollHorizontal: Boolean,

package/src/components/virtual-scroll/use-virtual-scroll.json

@@ -9,7 +9,7 @@
     "virtual-scroll-slice-size": {
       "type": [ "Number", "String", "null" ],
       "desc": "Minimum number of items to render in the virtual list",
-      "default": "30",
+      "default": "10",
       "examples": [ "60", "'60'" ],
       "category": "virtual-scroll"
     },

package/src/composables/private.use-anchor/use-anchor-static.json

@@ -0,0 +1,22 @@
+{
+  "props": {
+    "target": {
+      "type": [ "Boolean", "String", "Element" ],
+      "desc": "Configure a target element to trigger component toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)",
+      "default": "true",
+      "examples": [
+        "false",
+        ".my-parent",
+        "#target-id",
+        "$refs.target"
+      ],
+      "category": "behavior"
+    },
+
+    "no-parent-event": {
+      "type": "Boolean",
+      "desc": "Skips attaching events to the target DOM element (that trigger the element to get shown)",
+      "category": "behavior"
+    }
+  }
+}

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

@@ -4,11 +4,20 @@ import { clearSelection } from '../../utils/private.selection/selection.js'
 import { addEvt, cleanEvt, prevent } from '../../utils/event/event.js'
 import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 
+export const useAnchorStaticProps = {
+  /* SSR does not know about Element */
+  target: __QUASAR_SSR_SERVER__
+    ? { default: true }
+    : {
+        type: [ Boolean, String, Element ],
+        default: true
+      },
+
+  noParentEvent: Boolean
+}
+
 export const useAnchorProps = {
-  target: {
-    default: true
-  },
-  noParentEvent: Boolean,
+  ...useAnchorStaticProps,
   contextMenu: Boolean
 }
 

package/src/composables/private.use-anchor/use-anchor.json

@@ -1,24 +1,7 @@
 {
-  "props": {
-    "target": {
-      "type": [ "Boolean", "String", "Element" ],
-      "desc": "Configure a target element to trigger component toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)",
-      "default": "true",
-      "examples": [
-        "false",
-        ".my-parent",
-        "#target-id",
-        "$refs.target"
-      ],
-      "category": "behavior"
-    },
-
-    "no-parent-event": {
-      "type": "Boolean",
-      "desc": "Skips attaching events to the target DOM element (that trigger the element to get shown)",
-      "category": "behavior"
-    },
+  "mixins": [ "composables/private.use-anchor/use-anchor-static" ],
 
+  "props": {
     "context-menu": {
       "type": "Boolean",
       "desc": "Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)",

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

@@ -18,7 +18,7 @@ export function fieldValueIsFilled (val) {
     && ('' + val).length !== 0
 }
 
-export const useFieldProps = {
+export const useNonInputFieldProps = {
   ...useDarkProps,
   ...useValidateProps,
 
@@ -61,12 +61,15 @@ export const useFieldProps = {
 
   autofocus: Boolean,
 
-  for: String,
+  for: String
+}
 
+export const useFieldProps = {
+  ...useNonInputFieldProps,
   maxlength: [ Number, String ]
 }
 
-export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popupShow', 'popupHide' ]
+export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur' ]
 
 export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
   const { props, proxy } = getCurrentInstance()

package/src/composables/private.use-field/use-field.json

@@ -212,6 +212,28 @@
   },
 
   "events": {
+    "update:model-value": {
+      "extends": "update:model-value"
+    },
+
+    "focus": {
+      "desc": "Emitted when component gets focused",
+      "params": {
+        "evt": {
+          "extends": "evt"
+        }
+      }
+    },
+
+    "blur": {
+      "desc": "Emitted when component loses focus",
+      "params": {
+        "evt": {
+          "extends": "evt"
+        }
+      }
+    },
+
     "clear": {
       "desc": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",
       "params": {

package/src/composables/private.use-fullscreen/use-fullscreen.json

@@ -24,6 +24,16 @@
           "desc": "Fullscreen state (showing/hidden)"
         }
       }
+    },
+
+    "update:fullscreen": {
+      "desc": "Used by Vue on 'v-model:fullscreen' prop for updating its value",
+      "params": {
+        "value": {
+          "type": "Boolean",
+          "desc": "Fullscreen state (showing/hidden)"
+        }
+      }
     }
   },
 

package/src/composables/private.use-model-toggle/use-model-toggle.json

@@ -1,9 +1,11 @@
 {
   "props": {
     "model-value": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
       "desc": "Model of the component defining shown/hidden state; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
-      "category": "model"
+      "default": "null",
+      "category": "model",
+      "examples": [ "# v-model=\"state\"" ]
     }
   },
 

package/src/composables/private.use-panel/use-panel.json

@@ -4,6 +4,7 @@
       "type": "Any",
       "desc": "Model of the component defining the current panel's name; If a Number is used, it does not define the panel's index, but rather the panel's name which can also be an Integer; Either use this property (along with a listener for 'update:model-value' event) OR use the v-model directive.",
       "examples": [ "# v-model=\"panelName\"" ],
+      "required": true,
       "category": "model"
     },
 
@@ -61,6 +62,7 @@
       "extends": "transition",
       "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
       "default": "# slide-right/slide-down",
+      "__runtimeDefault": true,
       "category": "transition"
     },
 
@@ -68,6 +70,7 @@
       "extends": "transition",
       "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
       "default": "# slide-left/slide-up",
+      "__runtimeDefault": true,
       "category": "transition"
     },
 

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

@@ -3,7 +3,7 @@ import { h, ref, onUnmounted, Teleport } from 'vue'
 import { createComponent } from '../../utils/private.create/create.js'
 import { noop } from '../../utils/event/event.js'
 import { addFocusWaitFlag, removeFocusWaitFlag } from '../../utils/private.focus/focus-manager.js'
-import { createGlobalNode, removeGlobalNode } from '../../utils/private.global/global-nodes.js'
+import { createGlobalNode, removeGlobalNode } from '../../utils/private.config/nodes.js'
 import { portalProxyList } from '../../utils/private.portal/portal.js'
 import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 

package/src/composables/private.use-router-link/use-router-link.js

@@ -77,10 +77,23 @@ function isSameRouteLocationParams (a, b) {
   return true
 }
 
-export const useRouterLinkProps = {
+export const useRouterLinkNonMatchingProps = {
   // router-link
   to: [ String, Object ],
   replace: Boolean,
+
+  // regular <a> link
+  href: String,
+  target: String,
+
+  // state
+  disable: Boolean
+}
+
+export const useRouterLinkProps = {
+  ...useRouterLinkNonMatchingProps,
+
+  // router-link
   exact: Boolean,
   activeClass: {
     type: String,
@@ -89,14 +102,7 @@ export const useRouterLinkProps = {
   exactActiveClass: {
     type: String,
     default: 'q-router-link--exact-active'
-  },
-
-  // regular <a> link
-  href: String,
-  target: String,
-
-  // state
-  disable: Boolean
+  }
 }
 
 // external props: type, tag

package/src/composables/private.use-router-link/use-router-link.json

@@ -25,6 +25,7 @@
     "active-class": {
       "type": "String",
       "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used",
+      "default": "'q-router-link--active'",
       "examples": [ "'my-active-class'" ],
       "category": "navigation"
     },
@@ -32,6 +33,7 @@
     "exact-active-class": {
       "type": "String",
       "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used",
+      "default": "'q-router-link--exact-active'",
       "examples": [ "'my-exact-active-class'" ],
       "category": "navigation"
     },

package/src/composables/private.use-validate/use-validate.json

@@ -47,6 +47,7 @@
     "lazy-rules": {
       "type": [ "Boolean", "String" ],
       "desc": "If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper QForm submits itself",
+      "default": "false",
       "values": [ "true", "false", "'ondemand'" ],
       "category": "behavior"
     }

package/src/composables/use-id/use-id.test.js

@@ -58,7 +58,6 @@ describe('[useId API]', () => {
           defineComponent({
             template: '<div />',
             setup () {
-              // eslint-disable-next-line
               const result = useId()
               return { result }
             }