quasar 2.15.1 → 2.15.3

package/src/composables/private.use-dark/use-dark.test.js

@@ -0,0 +1,68 @@
+import { describe, test, expect } from 'vitest'
+
+import useDark, { useDarkProps } from './use-dark.js'
+
+describe('[useDark API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useDarkProps]', () => {
+      test('is defined correctly', () => {
+        expect(useDarkProps).toBeTypeOf('object')
+        expect(Object.keys(useDarkProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        expect(
+          useDark({}, {})
+        ).$ref()
+      })
+
+      test('keeps account of $q.dark when prop is null', () => {
+        const $q = {
+          dark: {
+            isActive: true
+          }
+        }
+
+        expect(
+          useDark({ dark: null }, $q)
+        ).$ref(true)
+
+        $q.dark.isActive = false
+
+        expect(
+          useDark({ dark: null }, $q)
+        ).$ref(false)
+      })
+
+      test('returns prop value regardless of $q.dark', () => {
+        const $q = {
+          dark: {
+            isActive: true
+          }
+        }
+
+        expect(
+          useDark({ dark: true }, $q)
+        ).$ref(true)
+
+        expect(
+          useDark({ dark: false }, $q)
+        ).$ref(false)
+
+        $q.dark.isActive = false
+
+        expect(
+          useDark({ dark: true }, $q)
+        ).$ref(true)
+
+        expect(
+          useDark({ dark: false }, $q)
+        ).$ref(false)
+      })
+    })
+  })
+})

package/src/composables/{private → private.use-field}/use-field.js

@@ -3,14 +3,14 @@ import { h, ref, computed, Transition, nextTick, onActivated, onDeactivated, onB
 import QIcon from '../../components/icon/QIcon.js'
 import QSpinner from '../../components/spinner/QSpinner.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useId from '../use-id.js'
-import useValidate, { useValidateProps } from './use-validate.js'
-import useSplitAttrs from '../use-split-attrs.js'
-
-import { hSlot } from '../../utils/private/render.js'
-import { prevent, stopAndPrevent } from '../../utils/event.js'
-import { addFocusFn, removeFocusFn } from '../../utils/private/focus-manager.js'
+import useId from '../use-id/use-id.js'
+import useSplitAttrs from '../use-split-attrs/use-split-attrs.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useValidate, { useValidateProps } from '../private.use-validate/use-validate.js'
+
+import { hSlot } from '../../utils/private.render/render.js'
+import { prevent, stopAndPrevent } from '../../utils/event/event.js'
+import { addFocusFn, removeFocusFn } from '../../utils/private.focus/focus-manager.js'
 
 export function fieldValueIsFilled (val) {
   return val !== void 0

package/src/composables/{private → private.use-field}/use-field.json

@@ -1,11 +1,11 @@
 {
-  "mixins": [ "composables/private/use-validate" ],
+  "mixins": [ "composables/private.use-validate/use-validate" ],
 
   "props": {
     "label": {
       "type": "String",
       "desc": "A text label that will “float” up above the input field, once the field gets focus",
-      "examples": [ "Username" ],
+      "examples": [ "'Username'" ],
       "category": "content"
     },
 
@@ -18,7 +18,7 @@
     "hint": {
       "type": "String",
       "desc": "Helper (hint) text which gets placed below your wrapped form component",
-      "examples": [ "Fill in between 3 and 12 characters" ],
+      "examples": [ "'Fill in between 3 and 12 characters'" ],
       "category": "content"
     },
 
@@ -31,14 +31,14 @@
     "prefix": {
       "type": "String",
       "desc": "Prefix",
-      "examples": [ "$" ],
+      "examples": [ "'$'" ],
       "category": "content"
     },
 
     "suffix": {
       "type": "String",
       "desc": "Suffix",
-      "examples": [ "@gmail.com" ],
+      "examples": [ "'@gmail.com'" ],
       "category": "content"
     },
 
@@ -74,7 +74,7 @@
     "clear-icon": {
       "type": "String",
       "desc": "Custom icon to use for the clear button when using along with 'clearable' prop",
-      "examples": [ "close" ],
+      "examples": [ "'close'" ],
       "category": "content"
     },
 
@@ -99,10 +99,7 @@
     "standout": {
       "type": [ "Boolean", "String" ],
       "desc": "Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones)",
-      "examples": [
-        "standout",
-        "standout=\"bg-primary text-white\""
-      ],
+      "examples": [ "true", "'bg-primary text-white'" ],
       "category": "style"
     },
 
@@ -167,14 +164,7 @@
     "for": {
       "type": "String",
       "desc": "Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well",
-      "examples": [ "myFieldsId" ],
-      "category": "behavior"
-    },
-
-    "name": {
-      "type": "String",
-      "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists",
-      "examples": [ "car_id" ],
+      "examples": [ "'myFieldsId'" ],
       "category": "behavior"
     }
   },
@@ -235,11 +225,15 @@
 
   "methods": {
     "focus": {
-      "desc": "Focus component"
+      "desc": "Focus component",
+      "params": null,
+      "returns": null
     },
 
     "blur": {
-      "desc": "Blur component (lose focus)"
+      "desc": "Blur component (lose focus)",
+      "params": null,
+      "returns": null
     }
   }
 }

package/src/composables/{private → private.use-file}/use-file.js

@@ -1,7 +1,7 @@
 import { h, ref, computed, getCurrentInstance } from 'vue'
 
-import { client } from '../../plugins/Platform.js'
-import { stop, stopAndPrevent } from '../../utils/event.js'
+import { client } from '../../plugins/platform/Platform.js'
+import { stop, stopAndPrevent } from '../../utils/event/event.js'
 
 function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
   const acceptedFiles = []

package/src/composables/{private → private.use-file}/use-file.json

@@ -9,23 +9,21 @@
     "accept": {
       "type": "String",
       "desc": "Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element",
-      "examples": [
-        ".jpg, .pdf, image/*", "image/jpeg, .pdf"
-      ],
+      "examples": [ "'.jpg, .pdf, image/*'", "'image/jpeg, .pdf'" ],
       "category": "behavior"
     },
 
     "capture": {
       "type": "String",
       "desc": "Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the 'accept' prop. Maps to 'capture' attribute of native input type=file element",
-      "values": [ "user", "environment" ],
+      "values": [ "'user'", "'environment'" ],
       "category": "behavior"
     },
 
     "max-file-size": {
       "type": [ "Number", "String" ],
       "desc": "Maximum size of individual file in bytes",
-      "examples": [ 1024, 1048576 ],
+      "examples": [ "1024", "'1048576'" ],
       "category": "behavior"
     },
 
@@ -46,7 +44,7 @@
       "desc": "Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "files": {
-          "type": [ "FileList", "Array" ],
+          "type": [ "Array", "FileList" ],
           "desc": "Candidate files to be added to queue"
         }
       },
@@ -54,7 +52,7 @@
         "type": "Array",
         "desc": "Filtered files to be added to queue"
       },
-      "examples": [ ":filter=\"files => files.filter(file => file.size === 1024)\"" ],
+      "examples": [ "files => files.filter(file => file.size === 1024)" ],
       "category": "behavior"
     }
   },
@@ -79,18 +77,20 @@
         "evt": {
           "extends": "evt"
         }
-      }
+      },
+      "returns": null
     },
 
     "addFiles": {
       "desc": "Add files programmatically",
       "params": {
         "files": {
-          "type": [ "FileList", "Array" ],
+          "type": [ "Array", "FileList" ],
           "desc": "Array of files (instances of File)",
           "required": true
         }
-      }
+      },
+      "returns": null
     }
   }
 }

package/src/composables/{private → private.use-fullscreen}/use-fullscreen.js

@@ -1,7 +1,7 @@
 import { ref, watch, onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import History from '../../history.js'
-import { vmHasRouter } from '../../utils/private/vm.js'
+import History from '../../plugins/private.history/History.js'
+import { vmHasRouter } from '../../utils/private.vm/vm.js'
 
 let counter = 0
 

package/src/composables/{private → private.use-fullscreen}/use-fullscreen.json

@@ -4,9 +4,7 @@
       "type": "Boolean",
       "sync": true,
       "desc": "Fullscreen mode",
-      "examples": [
-        "v-model:fullscreen=\"isFullscreen\""
-      ],
+      "examples": [ "# v-model:fullscreen=\"isFullscreen\"" ],
       "category": "behavior"
     },
 
@@ -31,14 +29,20 @@
 
   "methods": {
     "toggleFullscreen": {
-      "desc": "Toggle the view to be fullscreen or not fullscreen"
+      "desc": "Toggle the view to be fullscreen or not fullscreen",
+      "params": null,
+      "returns": null
     },
     "setFullscreen": {
-      "desc": "Enter the fullscreen view"
+      "desc": "Enter the fullscreen view",
+      "params": null,
+      "returns": null
     },
 
     "exitFullscreen": {
-      "desc": "Leave the fullscreen view"
+      "desc": "Leave the fullscreen view",
+      "params": null,
+      "returns": null
     }
   }
 }

package/src/composables/{private → private.use-history}/use-history.js

@@ -1,6 +1,6 @@
 import { onBeforeUnmount } from 'vue'
 
-import History from '../../history.js'
+import History from '../../plugins/private.history/History.js'
 
 export default function (showing, hide, hideOnRouteChange) {
   let historyEntry

package/src/composables/private.use-history/use-history.test.js

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+import { computed, defineComponent } from 'vue'
+
+import useHistory from './use-history.js'
+
+describe('[useHistory API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('can be used in a Vue Component', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const showing = computed(() => false)
+              const hide = () => {}
+              const hideOnRouteChange = computed(() => false)
+              const result = useHistory(showing, hide, hideOnRouteChange)
+              return { result }
+            }
+          })
+        )
+
+        expect(
+          wrapper.vm.result
+        ).toStrictEqual({
+          removeFromHistory: expect.any(Function),
+          addToHistory: expect.any(Function)
+        })
+
+        wrapper.unmount()
+      })
+
+      test('can add and remove', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const showing = computed(() => false)
+              const hide = () => {}
+              const hideOnRouteChange = computed(() => false)
+              return useHistory(showing, hide, hideOnRouteChange)
+            }
+          })
+        )
+
+        expect(
+          () => wrapper.vm.removeFromHistory()
+        ).not.toThrow()
+
+        expect(
+          wrapper.vm.addToHistory()
+        ).toBeUndefined()
+
+        expect(
+          wrapper.vm.removeFromHistory()
+        ).toBeUndefined()
+
+        expect(
+          () => wrapper.vm.removeFromHistory()
+        ).not.toThrow()
+      })
+
+      test('does not throw on unmount with showing=true', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const showing = computed(() => true)
+              const hide = () => {}
+              const hideOnRouteChange = computed(() => false)
+              return useHistory(showing, hide, hideOnRouteChange)
+            }
+          })
+        )
+
+        expect(
+          () => wrapper.unmount()
+        ).not.toThrow()
+      })
+
+      /*
+       * Needs Capacitor or Cordova
+       *
+
+      test('hide handler is called on route change', async () => {
+        const router = await getRouter('/home')
+
+        const hide = vi.fn()
+
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const showing = computed(() => false)
+              const hideOnRouteChange = computed(() => true)
+              return useHistory(showing, hide, hideOnRouteChange)
+            }
+          }, {
+            global: {
+              plugins: [ router ]
+            }
+          })
+        )
+
+        await router.push('/home')
+
+        // trigger BACK button
+
+        expect(hide).toHaveBeenCalledTimes(1)
+        expect(hide).toHaveBeenCalledWith()
+      })
+      */
+    })
+  })
+})

package/src/composables/{private → private.use-key-composition}/use-key-composition.js

@@ -1,4 +1,4 @@
-import { client } from '../../plugins/Platform.js'
+import { client } from '../../plugins/platform/Platform.js'
 
 const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
 const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u

package/src/composables/{private → private.use-model-toggle}/use-model-toggle.js

@@ -1,6 +1,6 @@
 import { watch, nextTick, onMounted, getCurrentInstance } from 'vue'
 
-import { vmHasRouter } from '../../utils/private/vm.js'
+import { vmHasRouter } from '../../utils/private.vm/vm.js'
 
 export const useModelToggleProps = {
   modelValue: {

package/src/composables/{private → private.use-panel}/use-panel.child.json

@@ -4,9 +4,7 @@
       "type": "Any",
       "desc": "Panel name",
       "required": true,
-      "examples": [
-        "accounts", "firstPanel", ":name=\"1\""
-      ],
+      "examples": [ "'accounts'", "'firstPanel'", "1" ],
       "category": "general"
     },
 

package/src/composables/{private → private.use-panel}/use-panel.js

@@ -1,11 +1,11 @@
 import { h, ref, computed, watch, nextTick, getCurrentInstance, Transition, KeepAlive } from 'vue'
 
-import TouchSwipe from '../../directives/TouchSwipe.js'
+import TouchSwipe from '../../directives/touch-swipe/TouchSwipe.js'
 
-import useRenderCache from '../../composables/use-render-cache.js'
+import useRenderCache from '../../composables/use-render-cache/use-render-cache.js'
 
-import { hSlot } from '../../utils/private/render.js'
-import { getNormalizedVNodes } from '../../utils/private/vm.js'
+import { hSlot } from '../../utils/private.render/render.js'
+import { getNormalizedVNodes } from '../../utils/private.vm/vm.js'
 
 export const usePanelChildProps = {
   name: { required: true },

package/src/composables/{private → private.use-panel}/use-panel.json

@@ -3,7 +3,7 @@
     "model-value": {
       "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\"" ],
+      "examples": [ "# v-model=\"panelName\"" ],
       "category": "model"
     },
 
@@ -16,14 +16,14 @@
     "keep-alive-include": {
       "type": [ "String", "Array", "RegExp" ],
       "desc": "Equivalent to using Vue's native include prop for <keep-alive>; Values must be valid Vue component names",
-      "examples": [ "a,b", "/a|b/", "['a', 'b']" ],
+      "examples": [ "'a,b'", "/a|b/", "[ 'a', 'b' ]" ],
       "category": "behavior"
     },
 
     "keep-alive-exclude": {
       "type": [ "String", "Array", "RegExp"  ],
       "desc": "Equivalent to using Vue's native exclude prop for <keep-alive>; Values must be valid Vue component names",
-      "examples": [ "a,b", "/a|b/", "['a', 'b']" ],
+      "examples": [ "'a,b'", "/a|b/", "[ 'a', 'b' ]" ],
       "category": "behavior"
     },
 
@@ -60,21 +60,21 @@
     "transition-prev": {
       "extends": "transition",
       "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
-      "default": "slide-right/slide-down",
+      "default": "# slide-right/slide-down",
       "category": "transition"
     },
 
     "transition-next": {
       "extends": "transition",
       "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
-      "default": "slide-left/slide-up",
+      "default": "# slide-left/slide-up",
       "category": "transition"
     },
 
     "transition-duration": {
       "type": [ "String", "Number" ],
       "desc": "Transition duration (in milliseconds, without unit)",
-      "default": 300,
+      "default": "300",
       "category": "transition",
       "addedIn": "v2.2"
     }
@@ -87,7 +87,7 @@
         "value": {
           "type": [ "String", "Number" ],
           "desc": "New current panel name",
-          "examples": [ "dashboard" ]
+          "examples": [ "'dashboard'" ]
         }
       }
     },
@@ -98,12 +98,12 @@
         "newVal": {
           "type": [ "String", "Number" ],
           "desc": "Panel name towards transition is going",
-          "examples": [ "dashboard" ]
+          "examples": [ "'dashboard'" ]
         },
         "oldVal": {
           "type": [ "String", "Number" ],
           "desc": "Panel name from which transition is happening",
-          "examples": [ "dashboard" ]
+          "examples": [ "'dashboard'" ]
         }
       }
     },
@@ -114,12 +114,12 @@
         "newVal": {
           "type": [ "String", "Number" ],
           "desc": "Panel name towards transition has occurred",
-          "examples": [ "dashboard" ]
+          "examples": [ "'dashboard'" ]
         },
         "oldVal": {
           "type": [ "String", "Number" ],
           "desc": "Panel name from which transition has happened",
-          "examples": [ "dashboard" ]
+          "examples": [ "'dashboard'" ]
         }
       }
     }
@@ -127,11 +127,15 @@
 
   "methods": {
     "next": {
-      "desc": "Go to next panel"
+      "desc": "Go to next panel",
+      "params": null,
+      "returns": null
     },
 
     "previous": {
-      "desc": "Go to previous panel"
+      "desc": "Go to previous panel",
+      "params": null,
+      "returns": null
     },
 
     "goTo": {
@@ -141,9 +145,10 @@
           "type": [ "String", "Number" ],
           "desc": "Panel's name, which may be a String or Number; Number does not refers to panel index, but to its name, which may be an Integer",
           "required": true,
-          "examples": [ "dashboard" ]
+          "examples": [ "'dashboard'" ]
         }
-      }
+      },
+      "returns": null
     }
   }
 }

package/src/composables/{private → private.use-portal}/use-portal.js

@@ -1,10 +1,25 @@
 import { h, ref, onUnmounted, Teleport } from 'vue'
 
-import { noop } from '../../utils/event.js'
-import { addFocusWaitFlag, removeFocusWaitFlag } from '../../utils/private/focus-manager.js'
-import { createGlobalNode, removeGlobalNode } from '../../utils/private/global-nodes.js'
-import { portalProxyList } from '../../utils/private/portal.js'
-import { injectProp } from '../../utils/private/inject-obj-prop.js'
+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 { portalProxyList } from '../../utils/private.portal/portal.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
+
+/**
+ * Noop internal component to ease testing
+ * of the teleported content.
+ *
+ * const wrapper = mount(QDialog, { ... })
+ * const teleportedWrapper = wrapper.findComponent({ name: 'QPortal' })
+ */
+const QPortal = createComponent({
+  name: 'QPortal',
+  setup (_, { slots }) {
+    return () => slots.default()
+  }
+})
 
 function isOnGlobalDialog (vm) {
   vm = vm.parent
@@ -111,7 +126,7 @@ export default function (vm, innerRef, renderPortalContent, type) {
         ? renderPortalContent()
         : (
             portalIsActive.value === true
-              ? [ h(Teleport, { to: portalEl }, renderPortalContent()) ]
+              ? [ h(Teleport, { to: portalEl }, h(QPortal, renderPortalContent)) ]
               : void 0
           )
     )

package/src/composables/{private → private.use-prevent-scroll}/use-prevent-scroll.js

@@ -1,4 +1,4 @@
-import preventScroll from '../../utils/prevent-scroll.js'
+import preventScroll from '../../utils/scroll/prevent-scroll.js'
 
 export default function () {
   let currentState

package/src/composables/{private → private.use-ratio}/use-ratio.json

@@ -4,9 +4,10 @@
       "type": [ "String", "Number" ],
       "desc": "Aspect ratio for the content; If value is a String, then avoid using a computational statement (like '16/9') and instead specify the String value of the result directly (eg. '1.7777')",
       "examples": [
-        ":ratio=\"4/3\"",
-        ":ratio=\"16/9\"",
-        "ratio=\"1\""
+        "1",
+        "'1.7778'",
+        "# :ratio=\"4/3\"",
+        "# :ratio=\"16/9\""
       ],
       "category": "style"
     }