quasar 2.15.1 → 2.15.2

package/src/composables/private/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'" ]
         }
       }
     }
@@ -141,7 +141,7 @@
           "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'" ]
         }
       }
     }

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

@@ -1,11 +1,26 @@
 import { h, ref, onUnmounted, Teleport } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 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'
 
+/**
+ * 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/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"
     }

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

@@ -0,0 +1,27 @@
+import { describe, test, expect } from 'vitest'
+
+import useRatio from './use-ratio.js'
+
+describe('[useRatio API]', () => {
+  test('should return padding when ratio is supplied', () => {
+    const { value } = useRatio({ ratio: 2 })
+    expect(value).toBeTruthy()
+    expect(value.paddingBottom).toBeTruthy()
+  })
+
+  test('should return padding when naturalRatio is supplied', () => {
+    const { value } = useRatio({}, { value: 2 })
+    expect(value).toBeTruthy()
+    expect(value.paddingBottom).toBeTruthy()
+  })
+
+  test('should not return padding when invalid params', () => {
+    const { value } = useRatio({ ratio: 'a' })
+    expect(value).toBeFalsy()
+  })
+
+  test('should not return padding when no params are supplied', () => {
+    const { value } = useRatio({})
+    expect(value).toBeFalsy()
+  })
+})

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

@@ -4,8 +4,8 @@
       "type": [ "String", "Object" ],
       "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used",
       "examples": [
-        "/home/dashboard",
-        ":to=\"{ name: 'my-route-name' }\""
+        "'/home/dashboard'",
+        "{ name: 'my-route-name' }"
       ],
       "category": "navigation"
     },
@@ -25,21 +25,21 @@
     "active-class": {
       "type": "String",
       "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used",
-      "examples": [ "my-active-class" ],
+      "examples": [ "'my-active-class'" ],
       "category": "navigation"
     },
 
     "exact-active-class": {
       "type": "String",
       "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used",
-      "examples": [ "my-exact-active-class" ],
+      "examples": [ "'my-exact-active-class'" ],
       "category": "navigation"
     },
 
     "href": {
       "type": "String",
       "desc": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
-      "examples": [ "https://quasar.dev" ],
+      "examples": [ "'https://quasar.dev'" ],
       "category": "navigation",
       "addedIn": "v2.4"
     },
@@ -47,7 +47,7 @@
     "target": {
       "type": "String",
       "desc": "Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
-      "examples": [ "_blank", "_self", "_parent", "_top" ],
+      "examples": [ "'_blank'", "'_self'", "'_parent'", "'_top'" ],
       "category": "navigation",
       "addedIn": "v2.4"
     },

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

@@ -3,7 +3,7 @@
     "size": {
       "type": "String",
       "desc": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)",
-      "examples": [ "16px", "2rem", "xs", "md" ],
+      "examples": [ "'16px'", "'2rem'", "'xs'", "'md'" ],
       "category": "style"
     }
   }

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

@@ -0,0 +1,22 @@
+import { describe, test, expect } from 'vitest'
+
+import useSize, { useSizeDefaults } from './use-size.js'
+
+describe('[useSize API]', () => {
+  describe('(prop): size', () => {
+    test('should set the size', () => {
+      const { value } = useSize({ size: '24px' })
+      expect(value.fontSize).toBe('24px')
+    })
+
+    test('should set the size with standard size names', () => {
+      const { value } = useSize({ size: 'sm' })
+      expect(value.fontSize).toBe(`${ useSizeDefaults.sm }px`)
+    })
+
+    test('should set the size with custom size names', () => {
+      const { value } = useSize({ size: 'xs' }, { xs: 55 })
+      expect(value.fontSize).toBe('55px')
+    })
+  })
+})

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

@@ -2,18 +2,18 @@
   "props": {
     "transition-show": {
       "extends": "transition",
-      "default": "fade"
+      "default": "'fade'"
     },
 
     "transition-hide": {
       "extends": "transition",
-      "default": "fade"
+      "default": "'fade'"
     },
 
     "transition-duration": {
       "type": [ "String", "Number" ],
       "desc": "Transition duration (in milliseconds, without unit)",
-      "default": 300,
+      "default": "300",
       "category": "transition"
     }
   }

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

@@ -8,7 +8,7 @@
 
     "error": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Does field have validation errors?",
       "category": "behavior"
     },
@@ -16,7 +16,7 @@
     "error-message": {
       "type": "String",
       "desc": "Validation error message (gets displayed only if 'error' is set to 'true')",
-      "examples": [ "Username must have at least 5 characters" ],
+      "examples": [ "'Username must have at least 5 characters'" ],
       "category": "content"
     },
 
@@ -31,9 +31,9 @@
       "tsType": "ValidationRule",
       "desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
       "examples": [
-        ":rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"",
-        ":rules=\"[ 'fulltime' ]\"",
-        ":rules=\"[ (val, rules) => rules.email(val) || 'Please enter a valid email address' ]\""
+        "[ val => val.length <= 3 || 'Please use maximum 3 characters' ]",
+        "[ 'fulltime' ]",
+        "[ (val, rules) => rules.email(val) || 'Please enter a valid email address' ]"
       ],
       "category": "behavior"
     },
@@ -47,7 +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",
-      "values": [ "(Boolean) true", "(Boolean) false", "ondemand" ],
+      "values": [ "true", "false", "'ondemand'" ],
       "category": "behavior"
     }
   },

package/src/composables/use-hydration.js

@@ -1,7 +1,7 @@
 import { ref, onMounted } from 'vue'
 
 // using it to manage SSR rendering with best performance
-import { isRuntimeSsrPreHydration } from '../plugins/Platform.js'
+import { isRuntimeSsrPreHydration } from '../plugins/platform/Platform.js'
 
 export default function () {
   const isHydrated = ref(!isRuntimeSsrPreHydration.value)

package/src/composables/use-id.js

@@ -2,7 +2,7 @@ import { ref, computed, watch, onMounted } from 'vue'
 
 import uid from '../utils/uid.js'
 
-import { isRuntimeSsrPreHydration } from '../plugins/Platform.js'
+import { isRuntimeSsrPreHydration } from '../plugins/platform/Platform.js'
 
 function parseValue (val) {
   return val === void 0 || val === null

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

@@ -0,0 +1,55 @@
+import { describe, test, expect } from 'vitest'
+
+import useId from './use-id.js'
+
+describe('[useId API]', () => {
+  test('useId()', () => {
+    const { value: result } = useId()
+
+    expect(result).toBeTruthy()
+    expect(result.startsWith('f_')).toBe(true)
+  })
+
+  test('useId({})', () => {
+    const { value: result } = useId({})
+
+    expect(result).toBeTruthy()
+    expect(result.startsWith('f_')).toBe(true)
+  })
+
+  test('useId({ getValue })', () => {
+    const { value: result } = useId({
+      getValue: () => 'MyValue'
+    })
+
+    expect(result).toBe('MyValue')
+  })
+
+  test('useId({ getValue: () => null })', () => {
+    const { value: result } = useId({
+      getValue: () => null
+    })
+
+    expect(result).toBeTruthy()
+    expect(result.startsWith('f_')).toBe(true)
+  })
+
+  test('useId({ getValue: () => null, required: true })', () => {
+    const { value: result } = useId({
+      getValue: () => null,
+      required: true
+    })
+
+    expect(result).toBeTruthy()
+    expect(result.startsWith('f_')).toBe(true)
+  })
+
+  test('useId({ getValue: () => null, required: false })', () => {
+    const { value: result } = useId({
+      getValue: () => null,
+      required: false
+    })
+
+    expect(result).toBe(null)
+  })
+})

package/src/composables/use-meta.js

@@ -1,6 +1,6 @@
 import { computed, watch, onActivated, onDeactivated, onUnmounted, useSSRContext } from 'vue'
 
-import { clientList, planClientUpdate } from '../plugins/Meta.js'
+import { clientList, planClientUpdate } from '../plugins/meta/Meta.js'
 
 export default function (metaOptions) {
   if (__QUASAR_SSR_SERVER__) {

package/src/composables.js

@@ -5,6 +5,7 @@ import useQuasar from './composables/use-quasar.js'
 
 import useHydration from './composables/use-hydration.js'
 import useId from './composables/use-id.js'
+import useInterval from './composables/use-interval.js'
 import useRenderCache from './composables/use-render-cache.js'
 import useSplitAttrs from './composables/use-split-attrs.js'
 import useTick from './composables/use-tick.js'
@@ -18,6 +19,7 @@ export {
 
   useHydration,
   useId,
+  useInterval,
   useRenderCache,
   useSplitAttrs,
   useTick,

package/src/css/index.sass

@@ -29,8 +29,6 @@
 @import '../components/color/QColor.sass'
 @import '../components/date/QDate.sass'
 @import '../components/dialog/QDialog.sass'
-@import '../components/dialog-bottom-sheet/BottomSheet.sass'
-@import '../components/dialog-plugin/DialogPlugin.sass'
 @import '../components/editor/QEditor.sass'
 @import '../components/expansion-item/QExpansionItem.sass'
 @import '../components/fab/QFab.sass'
@@ -78,12 +76,14 @@
 @import '../components/virtual-scroll/QVirtualScroll.sass'
 
 /* Directives */
-@import '../directives/Ripple.sass'
-@import '../directives/Morph.sass'
+@import '../directives/ripple/Ripple.sass'
+@import '../directives/morph/Morph.sass'
 
 /* Plugins */
-@import '../plugins/Loading.sass'
-@import '../plugins/Notify.sass'
+@import '../plugins/bottom-sheet/component/BottomSheetComponent.sass'
+@import '../plugins/dialog/component/DialogPluginComponent.sass'
+@import '../plugins/loading/Loading.sass'
+@import '../plugins/notify/Notify.sass'
 
 /* Core */
 @import './core/animations.sass'

package/src/directives/{ClosePopup.js → close-popup/ClosePopup.js}

@@ -1,7 +1,7 @@
-import { createDirective } from '../utils/private/create.js'
-import { closePortals, getPortalProxy } from '../utils/private/portal.js'
-import { isKeyCode } from '../utils/private/key-composition.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private/create.js'
+import { closePortals, getPortalProxy } from '../../utils/private/portal.js'
+import { isKeyCode } from '../../utils/private/key-composition.js'
+import getSSRProps from '../../utils/private/noop-ssr-directive-transform.js'
 
 /*
  * depth

package/src/directives/{ClosePopup.json → close-popup/ClosePopup.json}

@@ -7,11 +7,11 @@
     "type": [ "Boolean", "Number", "String" ],
     "desc": "If value is 0 or 'false' then directive is disabled; if value is < 0 then it closes all popups in the chain; if value is 1 or 'true' or undefined then it closes only the parent popup; if value is > 1 it closes the specified number of parent popups in the chain (note that chained QMenus are considered 1 popup only & QPopupProxy separates chained menus)",
     "examples": [
-      "v-close-popup",
-      "v-close-popup=\"booleanState\"",
-      "v-close-popup=\"-1\"",
-      "v-close-popup=\"2\"",
-      "v-close-popup=\"0\""
+      "# v-close-popup",
+      "# v-close-popup=\"booleanState\"",
+      "# v-close-popup=\"-1\"",
+      "# v-close-popup=\"2\"",
+      "# v-close-popup=\"0\""
     ]
   }
 }

package/src/directives/{Intersection.js → intersection/Intersection.js}

@@ -1,6 +1,6 @@
-import { createDirective } from '../utils/private/create.js'
-import { isDeepEqual } from '../utils/is.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private/create.js'
+import { isDeepEqual } from '../../utils/is.js'
+import getSSRProps from '../../utils/private/noop-ssr-directive-transform.js'
 
 const defaultCfg = {
   threshold: 0,

package/src/directives/{Intersection.json → intersection/Intersection.json}

@@ -7,8 +7,8 @@
     "type": [ "Object", "Function" ],
     "desc": "Function to call when scrolling occurs (identical to description of 'handler' prop of the Object form); If using the Object form, it is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard",
     "examples": [
-      "v-intersection=\"myFunction\"",
-      "v-intersection=\"{ handler: myFunction, cfg: { root: myScrollingParentEl, rootMargin: '10px 20px 30px 40px', threshold: [0, 0.25, 0.5, 0.75, 1] } }\""
+      "# v-intersection=\"myFunction\"",
+      "# v-intersection=\"{ handler: myFunction, cfg: { root: myScrollingParentEl, rootMargin: '10px 20px 30px 40px', threshold: [0, 0.25, 0.5, 0.75, 1] } }\""
     ],
 
     "definition": {
@@ -180,7 +180,7 @@
           "rootMargin": {
             "type": "String",
             "desc": "Allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections",
-            "examples": [ "10px 20px 30px 40px" ]
+            "examples": [ "'10px 20px 30px 40px'" ]
           },
 
           "threshold": {
@@ -209,9 +209,7 @@
     "once": {
       "type": "Boolean",
       "desc": "Call handler only once, when the conditions are first met",
-      "examples": [
-        "v-intersection.once"
-      ]
+      "examples": [ "# v-intersection.once" ]
     }
   }
 }

package/src/directives/{Morph.js → morph/Morph.js}

@@ -1,5 +1,5 @@
-import { createDirective } from '../utils/private/create.js'
-import morph from '../utils/morph.js'
+import { createDirective } from '../../utils/private/create.js'
+import morph from '../../utils/morph.js'
 
 const morphGroups = {}
 const props = [

package/src/directives/{Morph.json → morph/Morph.json}

@@ -10,19 +10,19 @@
       "group": {
         "type": "String",
         "desc": "Name of the morph group the element belongs to",
-        "examples": [ "dialogGroup" ]
+        "examples": [ "'dialogGroup'" ]
       },
 
       "name": {
         "type": "String",
         "desc": "Name of the morph inside the group that the element belongs to",
-        "examples": [ "btn" ]
+        "examples": [ "'btn'" ]
       },
 
       "model": {
         "type": "String",
         "desc": "Current value of the group model; when it becomes the same as the 'name' it triggers the morphing",
-        "examples": [ "btn" ]
+        "examples": [ "'btn'" ]
       },
 
       "duration": {
@@ -40,27 +40,27 @@
       "easing": {
         "type": "String",
         "desc": "Timing function for the animation (CSS easing format)",
-        "default": "ease-in-out",
-        "examples": [ "ease-out" ]
+        "default": "'ease-in-out'",
+        "examples": [ "'ease-out'" ]
       },
 
       "fill": {
         "type": "String",
         "desc": "Fill mode for the animation",
-        "default": "none",
-        "examples": [ "forward" ]
+        "default": "'none'",
+        "examples": [ "'forward'" ]
       },
 
       "classes": {
         "type": "String",
         "desc": "Class names to be added to the destination element during the animation",
-        "examples": [ "bg-grey-2" ]
+        "examples": [ "'bg-grey-2'" ]
       },
 
       "style": {
         "type": [ "String", "Object" ],
         "desc": "Styles to be added to the destination element during the animation",
-        "examples": [ "border-radius: 20px" ]
+        "examples": [ "'border-radius: 20px'" ]
       },
 
       "resize": {
@@ -91,20 +91,20 @@
       "tweenFromOpacity": {
         "type": "Number",
         "desc": "If using tween it is the initial opacity of the initial element (will be animated to 0) - the initial element is placed on top of the final element",
-        "default": 0.6
+        "default": "0.6"
       },
 
       "tweenToOpacity": {
         "type": "Number",
         "desc": "If using tween it is the initial opacity of the final element (will be animated to 1)",
-        "default": 0.5
+        "default": "0.5"
       },
 
       "waitFor": {
         "type": [ "Number", "String", "Promise<void>" ],
         "desc": "Delay animation start for that number of milliseconds, or until a 'transitionend' event is emitted by the destination element, or until the promise is resolved (if the promise is rejected the morphing will abort, but the 'toggle function' was already called)",
         "default": "0",
-        "examples": [ "300", "transitionend" ]
+        "examples": [ "300", "'200'", "'transitionend'" ]
       },
 
       "onEnd": {
@@ -115,7 +115,7 @@
           "direction": {
             "type": "String",
             "desc": "'to' if the morphing was finished in the final state or 'from' if it was finished in the initial state",
-            "values": [ "to", "from" ]
+            "values": [ "'to'", "'from'" ]
           },
           "aborted": {
             "type": "Boolean",
@@ -127,8 +127,8 @@
     },
 
     "examples": [
-      "v-morph:element2:group1=\"groupModel\"",
-      "v-morph=\"{ name: 'element2', group: 'group1', model: 'element1' }\""
+      "# v-morph:element2:group1=\"groupModel\"",
+      "# v-morph=\"{ name: 'element2', group: 'group1', model: 'element1' }\""
     ]
   },
 
@@ -136,11 +136,11 @@
     "type": "String",
     "desc": "x:x2:y:z, where x is the morph element name, x2 is the morph group, y is the animation duration (in milliseconds) and z is the amount of time to wait (in milliseconds) or the 'transitionend' string",
     "examples": [
-      "v-morph:name=\"options\"",
-      "v-morph:name:groupName=\"options\"",
-      "v-morph:name:groupName:400=\"options\"",
-      "v-morph:name:groupName:400:100=\"options\"",
-      "v-morph:name:groupName:400:transitionend=\"options\""
+      "# v-morph:name=\"options\"",
+      "# v-morph:name:groupName=\"options\"",
+      "# v-morph:name:groupName:400=\"options\"",
+      "# v-morph:name:groupName:400:100=\"options\"",
+      "# v-morph:name:groupName:400:transitionend=\"options\""
     ]
   },