quasar 2.15.4 → 2.16.0

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 }
             }

package/src/install-quasar.js

@@ -9,7 +9,7 @@ import Lang from './plugins/lang/Lang.js'
 import IconSet from './plugins/icon-set/IconSet.js'
 
 import { quasarKey } from './utils/private.symbols/symbols.js'
-import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private.global/global-config.js'
+import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private.config/instance-config.js'
 import { isObject } from './utils/is/is.js'
 
 /**

package/src/plugins/app-fullscreen/AppFullscreen.js

@@ -1,5 +1,5 @@
 import { createReactivePlugin } from '../../utils/private.create/create.js'
-import { changeGlobalNodesTarget } from '../../utils/private.global/global-nodes.js'
+import { changeGlobalNodesTarget } from '../../utils/private.config/nodes.js'
 
 const prefixes = {}
 

package/src/plugins/app-fullscreen/test/mock-fullscreen.js

@@ -1,4 +1,4 @@
-import { vi } from 'vitest'
+import { vi, onTestFinished } from 'vitest'
 
 /**
  * jsdom does not support Fullscreen API,

package/src/plugins/bottom-sheet/BottomSheet.js

@@ -1,5 +1,5 @@
 import BottomSheet from './component/BottomSheetComponent.js'
-import globalDialog from '../../utils/private.global/global-dialog.js'
+import globalDialog from '../../utils/private.dialog/create-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {

package/src/plugins/bottom-sheet/BottomSheet.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private.global/global-dialog" ],
+  "mixins": [ "utils/private.dialog/create-dialog" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/quasar-plugins/bottom-sheet"

package/src/plugins/dialog/Dialog.js

@@ -1,5 +1,5 @@
 import DialogPlugin from './component/DialogPluginComponent.js'
-import globalDialog from '../../utils/private.global/global-dialog.js'
+import globalDialog from '../../utils/private.dialog/create-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {

package/src/plugins/dialog/Dialog.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private.global/global-dialog" ],
+  "mixins": [ "utils/private.dialog/create-dialog" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/quasar-plugins/dialog"

package/src/plugins/icon-set/IconSet.js

@@ -1,8 +1,7 @@
 import { createReactivePlugin } from '../../utils/private.create/create.js'
 import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
-// no extension on purpose for next one:
-import materialIcons from '../../../icon-set/material-icons'
+import materialIcons from '../../../icon-set/material-icons.js'
 
 const Plugin = createReactivePlugin({
   iconMapFn: null,

package/src/plugins/icon-set/IconSet.test.js

@@ -330,13 +330,13 @@ describe('[IconSet API]', () => {
 
       test('should work with an imported icon set', async () => {
         const { vm: { $q } } = mountPlugin()
-        const { default: newIconSet } = await import('quasar/icon-set/fontawesome-v6.mjs')
+        const { default: newIconSet } = await import('quasar/icon-set/fontawesome-v6.js')
 
         IconSet.set(newIconSet)
         expect(IconSet.props.name).toBe(newIconSet.name)
         expect($q.iconSet.name).toBe(newIconSet.name)
 
-        const { default: anotherIconSet } = await import('quasar/icon-set/ionicons-v4.mjs')
+        const { default: anotherIconSet } = await import('quasar/icon-set/ionicons-v4.js')
         $q.iconSet.set(anotherIconSet)
         expect(IconSet.props.name).toBe(anotherIconSet.name)
         expect($q.iconSet.name).toBe(anotherIconSet.name)

package/src/plugins/lang/Lang.js

@@ -1,7 +1,6 @@
 import { createReactivePlugin } from '../../utils/private.create/create.js'
 
-// no extension on purpose for next one:
-import defaultLang from '../../../lang/en-US'
+import defaultLang from '../../../lang/en-US.js'
 
 function getLocale () {
   if (__QUASAR_SSR_SERVER__) return

package/src/plugins/lang/Lang.test.js

@@ -231,13 +231,13 @@ describe('[Lang API]', () => {
 
       test('should work with an imported lang pack', async () => {
         const { vm: { $q } } = mountPlugin()
-        const { default: deLang } = await import('quasar/lang/de-DE.mjs')
+        const { default: deLang } = await import('quasar/lang/de-DE.js')
 
         Lang.set(deLang)
         expect(Lang.props.nativeName).toBe(deLang.nativeName)
         expect($q.lang.nativeName).toBe(deLang.nativeName)
 
-        const { default: itLang } = await import('quasar/lang/it.mjs')
+        const { default: itLang } = await import('quasar/lang/it.js')
         $q.lang.set(itLang)
         expect(Lang.props.nativeName).toBe(itLang.nativeName)
         expect($q.lang.nativeName).toBe(itLang.nativeName)

package/src/plugins/loading/Loading.js

@@ -5,7 +5,7 @@ import QSpinner from '../../components/spinner/QSpinner.js'
 import { createChildApp } from '../../install-quasar.js'
 
 import { createReactivePlugin } from '../../utils/private.create/create.js'
-import { createGlobalNode, removeGlobalNode } from '../../utils/private.global/global-nodes.js'
+import { createGlobalNode, removeGlobalNode } from '../../utils/private.config/nodes.js'
 import preventScroll from '../../utils/scroll/prevent-scroll.js'
 import { isObject } from '../../utils/is/is.js'
 

package/src/plugins/loading-bar/LoadingBar.js

@@ -5,7 +5,7 @@ import { createChildApp } from '../../install-quasar.js'
 
 import { createReactivePlugin } from '../../utils/private.create/create.js'
 import { noop } from '../../utils/event/event.js'
-import { createGlobalNode } from '../../utils/private.global/global-nodes.js'
+import { createGlobalNode } from '../../utils/private.config/nodes.js'
 import { isObject } from '../../utils/is/is.js'
 
 const barRef = ref(null)

package/src/plugins/notify/Notify.js

@@ -9,7 +9,7 @@ import { createChildApp } from '../../install-quasar.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { noop } from '../../utils/event/event.js'
-import { createGlobalNode } from '../../utils/private.global/global-nodes.js'
+import { createGlobalNode } from '../../utils/private.config/nodes.js'
 import { isObject } from '../../utils/is/is.js'
 
 let uid = 0

package/src/utils/{private.global/global-config.test.js → private.config/instance-config.test.js}

@@ -1,7 +1,7 @@
 import { describe, test, expect } from 'vitest'
 import { mount, config } from '@vue/test-utils'
 
-import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './global-config.js'
+import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './instance-config.js'
 
 // We override Quasar install so we have a custom $q.config
 const quasarVuePlugin = config.global.plugins.find(entry => entry.name === 'Quasar')
@@ -12,7 +12,7 @@ function mountWithConfig (config) {
   mount({ template: '<div />' })
 }
 
-describe('[globalConfig API]', () => {
+describe('[instanceConfig API]', () => {
   describe('[Variables]', () => {
     describe('[(variable)globalConfig]', () => {
       test('is defined correctly', () => {

package/src/utils/{private.global/global-nodes.js → private.config/nodes.js}

@@ -1,4 +1,4 @@
-import { globalConfig } from '../private.global/global-config.js'
+import { globalConfig } from '../private.config/instance-config.js'
 
 const nodesList = []
 const portalTypeList = []

package/src/utils/{private.global/global-nodes.test.js → private.config/nodes.test.js}

@@ -1,7 +1,7 @@
 import { describe, test, expect, afterEach } from 'vitest'
 
-import { createGlobalNode, removeGlobalNode, changeGlobalNodesTarget } from './global-nodes.js'
-import { globalConfig } from './global-config.js'
+import { createGlobalNode, removeGlobalNode, changeGlobalNodesTarget } from './nodes.js'
+import { globalConfig } from './instance-config.js'
 
 let el = null
 
@@ -14,7 +14,7 @@ afterEach(() => {
   }
 })
 
-describe('[globalNodes API]', () => {
+describe('[nodes API]', () => {
   describe('[Functions]', () => {
     describe('[(function)createGlobalNode]', () => {
       test('createGlobalNode(id)', () => {

package/src/utils/{private.global/global-dialog.js → private.dialog/create-dialog.js}

@@ -1,7 +1,7 @@
 import { h, ref, nextTick } from 'vue'
 
 import { createChildApp } from '../../install-quasar.js'
-import { createGlobalNode, removeGlobalNode } from '../private.global/global-nodes.js'
+import { createGlobalNode, removeGlobalNode } from '../private.config/nodes.js'
 
 const ssrAPI = {
   onOk: () => ssrAPI,

package/src/utils/scroll/scroll.js

@@ -1,5 +1,9 @@
 import { css, getElement } from '../dom/dom.js'
 
+export const scrollTargetProp = __QUASAR_SSR_SERVER__
+  ? {} /* SSR does not know about Element */
+  : [ Element, String ]
+
 const scrollTargets = __QUASAR_SSR_SERVER__
   ? []
   : [ null, document, document.body, document.scrollingElement, document.documentElement ]