quasar 2.15.1 → 2.15.3

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

@@ -0,0 +1,35 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useQuasar from './use-quasar.js'
+
+describe('[useQuasar API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('can be used in a Vue Component', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const result = useQuasar()
+              return { result }
+            }
+          })
+        )
+
+        expect(
+          wrapper.vm.result
+        ).toBeTypeOf('object')
+
+        expect(
+          Object.keys(wrapper.vm.result)
+        ).not.toHaveLength(0)
+
+        expect(
+          wrapper.vm.result.version
+        ).toMatch(/^\d+\.\d+\.\d+$/)
+      })
+    })
+  })
+})

package/src/composables/{use-tick.js → use-tick/use-tick.js}

@@ -1,6 +1,6 @@
 import { nextTick, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { vmIsDestroyed } from '../utils/private/vm'
+import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
 /*
  * Usage:

package/src/composables/{use-timeout.js → use-timeout/use-timeout.js}

@@ -1,6 +1,6 @@
 import { onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { vmIsDestroyed } from '../utils/private/vm.js'
+import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
 /*
  * Usage:

package/src/composables.js

@@ -1,14 +1,15 @@
-import useDialogPluginComponent from './composables/use-dialog-plugin-component.js'
-import useFormChild from './composables/use-form-child.js'
-import useMeta from './composables/use-meta.js'
-import useQuasar from './composables/use-quasar.js'
+import useDialogPluginComponent from './composables/use-dialog-plugin-component/use-dialog-plugin-component.js'
+import useFormChild from './composables/use-form/use-form-child.js'
+import useMeta from './composables/use-meta/use-meta.js'
+import useQuasar from './composables/use-quasar/use-quasar.js'
 
-import useHydration from './composables/use-hydration.js'
-import useId from './composables/use-id.js'
-import useRenderCache from './composables/use-render-cache.js'
-import useSplitAttrs from './composables/use-split-attrs.js'
-import useTick from './composables/use-tick.js'
-import useTimeout from './composables/use-timeout.js'
+import useHydration from './composables/use-hydration/use-hydration.js'
+import useId from './composables/use-id/use-id.js'
+import useInterval from './composables/use-interval/use-interval.js'
+import useRenderCache from './composables/use-render-cache/use-render-cache.js'
+import useSplitAttrs from './composables/use-split-attrs/use-split-attrs.js'
+import useTick from './composables/use-tick/use-tick.js'
+import useTimeout from './composables/use-timeout/use-timeout.js'
 
 export {
   useDialogPluginComponent,
@@ -18,6 +19,7 @@ export {
 
   useHydration,
   useId,
+  useInterval,
   useRenderCache,
   useSplitAttrs,
   useTick,

package/src/css/index.sass

@@ -7,7 +7,7 @@
 @import '../components/icon/QIcon.sass'
 
 /* Composables */
-@import '../composables/private/use-panel.sass'
+@import '../composables/private.use-panel/use-panel.sass'
 
 /* Components */
 @import '../components/ajax-bar/QAjaxBar.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/create.js'
+import { closePortals, getPortalProxy } from '../../utils/private.portal/portal.js'
+import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/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/create.js'
+import { isDeepEqual } from '../../utils/is/is.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/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/create.js'
+import morph from '../../utils/morph/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,20 +115,20 @@
           "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",
             "desc": "Was the morphing aborted?"
           }
         },
-        "examples": [ "(direction, aborted) => { if (direction !== 'to') { revertLogic() } }" ]
+        "examples": [ "(direction, _aborted) => { if (direction !== 'to') { /* revertLogic() */ } }" ]
       }
     },
 
     "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\""
     ]
   },
 

package/src/directives/{Mutation.js → mutation/Mutation.js}

@@ -1,5 +1,5 @@
-import { createDirective } from '../utils/private/create.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 const defaultCfg = {
   childList: true,

package/src/directives/{Mutation.json → mutation/Mutation.json}

@@ -6,9 +6,7 @@
   "value": {
     "type": [ "Function" ],
     "desc": "Function to call when mutation occurs; 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=\"myHandler\""
-    ],
+    "examples": [ "# v-intersection=\"myHandler\"" ],
 
     "returns": {
       "type": "Boolean",
@@ -23,7 +21,7 @@
           "type": {
             "type": "String",
             "desc": "Type of mutation",
-            "values": [ "childList", "attributes", "characterData" ]
+            "values": [ "'childList'", "'attributes'", "'characterData'" ]
           },
 
           "target": {
@@ -54,7 +52,7 @@
           "attributeName": {
             "type": "String",
             "desc": "The local name of the changed attribute, or null",
-            "examples": [ "some-attribute" ]
+            "examples": [ "'some-attribute'" ]
           },
 
           "attributeNamespace": {
@@ -75,43 +73,43 @@
     "once": {
       "type": "Boolean",
       "desc": "Call handler only once, when the first mutation was triggered, then stop monitoring",
-      "examples": [ "v-mutation.once" ]
+      "examples": [ "# v-mutation.once" ]
     },
 
     "childList": {
       "type": "Boolean",
       "desc": "Monitor the target node (and, if 'subtree' is also set, its descendants) for the addition of new child nodes or removal of existing child nodes",
-      "examples": [ "v-mutation.childList" ]
+      "examples": [ "# v-mutation.childList" ]
     },
 
     "subtree": {
       "type": "Boolean",
       "desc": "Extend monitoring to the entire subtree of nodes rooted at target",
-      "examples": [ "v-mutation.subtree" ]
+      "examples": [ "# v-mutation.subtree" ]
     },
 
     "attributes": {
       "type": "Boolean",
       "desc": "Watch for changes to the value of attributes on the node or nodes being monitored",
-      "examples": [ "v-mutation.attributes" ]
+      "examples": [ "# v-mutation.attributes" ]
     },
 
     "characterData": {
       "type": "Boolean",
       "desc": "Monitor the specified target node or subtree for changes to the character data contained within the node or nodes",
-      "examples": [ "v-mutation.characterData" ]
+      "examples": [ "# v-mutation.characterData" ]
     },
 
     "attributeOldValue": {
       "type": "Boolean",
       "desc": "Record the previous value of any attribute that changes when monitoring the node or nodes for attribute changes",
-      "examples": [ "v-mutation.attributeOldValue" ]
+      "examples": [ "# v-mutation.attributeOldValue" ]
     },
 
     "characterDataOldValue": {
       "type": "Boolean",
       "desc": "Record the previous value of a node's text whenever the text changes on nodes being monitored",
-      "examples": [ "v-mutation.characterDataOldValue" ]
+      "examples": [ "# v-mutation.characterDataOldValue" ]
     }
   }
 }

package/src/directives/{Ripple.js → ripple/Ripple.js}

@@ -1,9 +1,9 @@
-import { createDirective } from '../utils/private/create.js'
-import { css } from '../utils/dom.js'
-import { position, stop, addEvt, cleanEvt } from '../utils/event.js'
-import { isKeyCode } from '../utils/private/key-composition.js'
-import throttle from '../utils/throttle.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import { css } from '../../utils/dom/dom.js'
+import { position, stop, addEvt, cleanEvt } from '../../utils/event/event.js'
+import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
+import throttle from '../../utils/throttle/throttle.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 function showRipple (evt, el, ctx, forceCenter) {
   ctx.modifiers.stop === true && stop(evt)

package/src/directives/{Ripple.json → ripple/Ripple.json}

@@ -25,13 +25,13 @@
       "color": {
         "type": "String",
         "desc": "Color name from Quasar Color Palette; Overrides default dynamic color",
-        "examples": [ "orange-5" ]
+        "examples": [ "'orange-5'" ]
       },
 
       "keyCodes": {
         "type": [ "Array", "Number" ],
         "desc": "List of keyCode that should trigger the ripple",
-        "examples": [ "[]", "[13, 32]" ]
+        "examples": [ "[]", "[ 13, 32 ]" ]
       }
     }
   },
@@ -58,27 +58,25 @@
       "color": {
         "type": "String",
         "desc": "Color name from Quasar Color Palette; Overrides default dynamic color",
-        "examples": [ "orange-5" ]
+        "examples": [ "'orange-5'" ]
       },
 
       "keyCodes": {
         "type": [ "Array", "Number" ],
         "desc": "List of keyCode that should trigger the ripple",
-        "examples": [ "[]", "[13, 32]" ]
+        "examples": [ "[]", "[ 13, 32 ]" ]
       }
     },
     "examples": [
-      "v-ripple=\"booleanState\"",
-      "v-ripple=\"{ center: true, color: 'primary', keyCodes: [] }\""
+      "# v-ripple=\"booleanState\"",
+      "# v-ripple=\"{ center: true, color: 'primary', keyCodes: [] }\""
     ]
   },
 
   "arg": {
     "type": "String",
     "desc": "Color name from Quasar Color Palette; Overrides default dynamic color",
-    "examples": [
-      "v-ripple:orange-5"
-    ]
+    "examples": [ "# v-ripple:orange-5" ]
   },
 
   "modifiers": {
@@ -90,17 +88,13 @@
     "stop": {
       "type": "Boolean",
       "desc": "Stop click/touch event propagation",
-      "examples": [
-        "v-ripple.stop"
-      ]
+      "examples": [ "# v-ripple.stop" ]
     },
 
     "center": {
       "type": "Boolean",
       "desc": "Ripple starts from the absolute center",
-      "examples": [
-        "v-ripple.center"
-      ]
+      "examples": [ "# v-ripple.center" ]
     }
   }
 }