quasar 2.15.1 → 2.15.3

package/src/directives/ripple/Ripple.test.js

@@ -0,0 +1,340 @@
+/**
+ * Ignored specs:
+ * [(modifier)center]
+ */
+
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+import { defineComponent, ref } from 'vue'
+
+import Ripple from './Ripple.js'
+
+describe('[Ripple API]', () => {
+  describe('[Value]', () => {
+    test('no value', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple />',
+        directives: { Ripple }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('click')
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+    })
+
+    test('as Boolean true', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple="true" />',
+        directives: { Ripple }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('click')
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+    })
+
+    test('as Boolean false', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple="false" />',
+        directives: { Ripple }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('click')
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(false)
+    })
+
+    test('as empty Object', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple="val" />',
+        directives: { Ripple },
+        setup () {
+          return {
+            val: {}
+          }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('click')
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+    })
+
+    test('as full Object', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple="val" />',
+        directives: { Ripple },
+        setup () {
+          return {
+            val: {
+              stop: true,
+              center: true,
+              color: 'orange-5',
+              keyCodes: []
+            }
+          }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('click')
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+    })
+
+    test('as { early: true }', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple="val" />',
+        directives: { Ripple },
+        setup () {
+          return {
+            val: { early: true }
+          }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('pointerdown')
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+    })
+
+    test('as { color: orange-5 }', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple="val" />',
+        directives: { Ripple },
+        setup () {
+          return {
+            val: { color: 'orange-5' }
+          }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('click')
+
+      expect(
+        wrapper.get('.q-ripple')
+          .classes()
+      ).toContain('text-orange-5')
+    })
+
+    test('as { stop: true }', async () => {
+      const TestComponent = defineComponent({
+        template: '<div><i v-ripple="val" /></div>',
+        directives: { Ripple },
+        setup () {
+          return {
+            val: { stop: true }
+          }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.get('i').trigger('click')
+
+      expect(
+        wrapper.emitted()
+      ).not.toHaveProperty('click')
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+    })
+
+    test('as { keyCodes: [ 65 ] }', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple="val" />',
+        directives: { Ripple },
+        setup () {
+          return {
+            val: { keyCodes: [ 65 ] }
+          }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('keyup', { keyCode: 65 })
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+    })
+
+    test('as { early: true, keyCodes: [ 65 ] }', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple="val" />',
+        directives: { Ripple },
+        setup () {
+          return {
+            val: {
+              early: true,
+              keyCodes: [ 65 ]
+            }
+          }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('keydown', { keyCode: 65 })
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+    })
+
+    test('is reactive', async () => {
+      const val = ref({ stop: true })
+      const TestComponent = defineComponent({
+        template: '<div><i v-ripple="val" /></div>',
+        directives: { Ripple },
+        setup () {
+          return { val }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.get('i').trigger('click')
+
+      expect(
+        wrapper.emitted()
+      ).not.toHaveProperty('click')
+
+      val.value = { color: 'red' }
+      await flushPromises()
+
+      await wrapper.get('i').trigger('click')
+
+      expect(
+        wrapper.find('i > .q-ripple.text-red')
+          .exists()
+      ).toBe(true)
+
+      expect(
+        wrapper.emitted()
+      ).toHaveProperty('click')
+    })
+
+    test('merges modifiers with value', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple.early="val" />',
+        directives: { Ripple },
+        setup () {
+          return {
+            val: { color: 'orange-5' }
+          }
+        }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('pointerdown')
+
+      expect(
+        wrapper.find('.q-ripple')
+          .exists()
+      ).toBe(true)
+
+      expect(
+        wrapper.get('.q-ripple')
+          .classes()
+      ).toContain('text-orange-5')
+    })
+  })
+
+  describe('[Argument]', () => {
+    test('has effect', async () => {
+      const TestComponent = defineComponent({
+        template: '<div v-ripple:orange-5 />',
+        directives: { Ripple }
+      })
+
+      const wrapper = mount(TestComponent)
+
+      await wrapper.trigger('click')
+
+      expect(
+        wrapper.get('.q-ripple')
+          .classes()
+      ).toContain('text-orange-5')
+    })
+  })
+
+  describe('[Modifiers]', () => {
+    describe('[(modifier)early]', () => {
+      test('has effect', async () => {
+        const TestComponent = defineComponent({
+          template: '<div v-ripple.early />',
+          directives: { Ripple }
+        })
+
+        const wrapper = mount(TestComponent)
+
+        await wrapper.trigger('pointerdown')
+
+        expect(
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(true)
+      })
+    })
+
+    describe('[(modifier)stop]', () => {
+      test('has effect', async () => {
+        const TestComponent = defineComponent({
+          template: '<div><i v-ripple.stop /></div>',
+          directives: { Ripple }
+        })
+
+        const wrapper = mount(TestComponent)
+
+        await wrapper.get('i').trigger('click')
+
+        expect(
+          wrapper.emitted()
+        ).not.toHaveProperty('click')
+
+        expect(
+          wrapper.find('.q-ripple')
+            .exists()
+        ).toBe(true)
+      })
+    })
+  })
+})

package/src/directives/{Scroll.js → scroll/Scroll.js}

@@ -1,7 +1,7 @@
-import { createDirective } from '../utils/private/create.js'
-import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../utils/scroll.js'
-import { listenOpts } from '../utils/event.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../../utils/scroll/scroll.js'
+import { listenOpts } from '../../utils/event/event.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 function update (ctx, { value, oldValue }) {
   if (typeof value !== 'function') {

package/src/directives/{Scroll.json → scroll/Scroll.json}

@@ -4,7 +4,7 @@
   },
 
   "value": {
-    "type": ["Function", "undefined"],
+    "type": [ "Function", "undefined" ],
     "desc": "Function to call when scrolling occurs (use undefined to disable)",
     "params": {
       "verticalScrollPosition": {
@@ -17,6 +17,6 @@
       }
     },
     "returns": null,
-    "examples": [ "v-scroll=\"fnToCall\"", "v-scroll=\"undefined\"" ]
+    "examples": [ "(verticalScrollPosition, horizontalScrollPosition) => { /* ... */ }" ]
   }
 }

package/src/directives/{ScrollFire.js → scroll-fire/ScrollFire.js}

@@ -1,9 +1,9 @@
-import { createDirective } from '../utils/private/create.js'
-import debounce from '../utils/debounce.js'
-import { height, offset } from '../utils/dom.js'
-import { getScrollTarget } from '../utils/scroll.js'
-import { listenOpts } from '../utils/event.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import debounce from '../../utils/debounce/debounce.js'
+import { height, offset } from '../../utils/dom/dom.js'
+import { getScrollTarget } from '../../utils/scroll/scroll.js'
+import { listenOpts } from '../../utils/event/event.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 const { passive } = listenOpts
 

package/src/directives/{ScrollFire.json → scroll-fire/ScrollFire.json}

@@ -13,6 +13,6 @@
       }
     },
     "returns": null,
-    "examples": [ "v-scroll-fire=\"fnToCall\"", "v-scroll-fire=\"undefined\"" ]
+    "examples": [ "el => { console.log('Element:', el) }" ]
   }
 }

package/src/directives/{TouchHold.js → touch-hold/TouchHold.js}

@@ -1,9 +1,9 @@
-import { client } from '../plugins/Platform.js'
+import { client } from '../../plugins/platform/Platform.js'
 
-import { createDirective } from '../utils/private/create.js'
-import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
-import { clearSelection } from '../utils/private/selection.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../../utils/event/event.js'
+import { clearSelection } from '../../utils/private.selection/selection.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 export default createDirective(__QUASAR_SSR_SERVER__
   ? { name: 'touch-hold', getSSRProps }

package/src/directives/{TouchHold.json → touch-hold/TouchHold.json}

@@ -4,7 +4,7 @@
   },
 
   "value": {
-    "type": ["Function", "undefined"],
+    "type": [ "Function", "undefined" ],
     "desc": "Function to call after user has hold touch/click for the specified amount of time (use undefined to disable)",
     "params": {
       "details": {
@@ -45,17 +45,17 @@
       }
     },
     "returns": null,
-    "examples": [ "v-touch-hold=\"fnToCall\"", "v-touch-hold=\"undefined\"" ]
+    "examples": [ "({ evt, touch, mouse, position, duration }) => { /* ... */ }" ]
   },
 
   "arg": {
     "type": "String",
     "desc": "x:y:z, where x is the amount of time to wait (in milliseconds), y is the touch event sensitivity (in pixels) and z is the mouse event sensitivity (in pixels)",
-    "default": "600:5:7",
+    "default": "'600:5:7'",
     "examples": [
-      "v-touch-hold:400=\"fnToCall\"",
-      "v-touch-hold:400:15=\"fnToCall\"",
-      "v-touch-hold:400:10:10=\"fnToCall\""
+      "# v-touch-hold:400=\"fnToCall\"",
+      "# v-touch-hold:400:15=\"fnToCall\"",
+      "# v-touch-hold:400:10:10=\"fnToCall\""
     ]
   },
 

package/src/directives/{TouchPan.js → touch-pan/TouchPan.js}

@@ -1,10 +1,10 @@
-import { client } from '../plugins/Platform.js'
+import { client } from '../../plugins/platform/Platform.js'
 
-import { createDirective } from '../utils/private/create.js'
-import { getModifierDirections, shouldStart } from '../utils/private/touch.js'
-import { addEvt, cleanEvt, position, leftClick, prevent, stop, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
-import { clearSelection } from '../utils/private/selection.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import { getModifierDirections, shouldStart } from '../../utils/private.touch/touch.js'
+import { addEvt, cleanEvt, position, leftClick, prevent, stop, stopAndPrevent, preventDraggable, noop } from '../../utils/event/event.js'
+import { clearSelection } from '../../utils/private.selection/selection.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 function getChanges (evt, ctx, isFinal) {
   const pos = position(evt)

package/src/directives/{TouchPan.json → touch-pan/TouchPan.json}

@@ -40,7 +40,7 @@
           "direction": {
             "type": "String",
             "desc": "Direction of movement",
-            "values": [ "up", "right", "down", "left" ]
+            "values": [ "'up'", "'right'", "'down'", "'left'" ]
           },
           "isFirst": {
             "type": "Boolean",
@@ -75,12 +75,12 @@
               "x": {
                 "type": "Number",
                 "desc": "Distance horizontally",
-                "examples": [ -231, 110 ]
+                "examples": [ "-231", "110" ]
               },
               "y": {
                 "type": "Number",
                 "desc": "Distance vertically",
-                "examples": [ -231, 110 ]
+                "examples": [ "-231", "110" ]
               }
             }
           },
@@ -102,7 +102,7 @@
       }
     },
     "returns": null,
-    "examples": [ "v-touch-pan=\"fnToCall\"", "v-touch-pan=\"undefined\"" ]
+    "examples": [ "({ evt, touch, mouse, position, direction, isFirst, isFinal, distance, offset, delta }) => { /* ... */ }" ]
   },
 
   "modifiers": {

package/src/directives/{TouchRepeat.js → touch-repeat/TouchRepeat.js}

@@ -1,10 +1,10 @@
-import { client } from '../plugins/Platform.js'
+import { client } from '../../plugins/platform/Platform.js'
 
-import { createDirective } from '../utils/private/create.js'
-import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
-import { clearSelection } from '../utils/private/selection.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 { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../../utils/event/event.js'
+import { clearSelection } from '../../utils/private.selection/selection.js'
+import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 const
   keyCodes = {

package/src/directives/{TouchRepeat.json → touch-repeat/TouchRepeat.json}

@@ -61,14 +61,14 @@
       }
     },
     "returns": null,
-    "examples": [ "v-touch-repeat=\"fnToCall\"", "v-touch-repeat=\"undefined\"" ]
+    "examples": [ "({ evt, touch, mouse, keyboard, position, keyCode, duration, repeatCount, startTime }) => { /* ... */ }" ]
   },
 
   "arg": {
     "type": "String",
     "desc": "String of numbers (at least one number) separated by ':' which defines the amount of time to wait for 1st handler call, 2nd, 3rd and so on; All subsequent calls will use last value as time to wait until triggering",
-    "default": "0:600:300",
-    "examples": [ "v-touch-repeat:0:400=\"fnToCall\"" ]
+    "default": "'0:600:300'",
+    "examples": [ "# v-touch-repeat:0:400=\"fnToCall\"" ]
   },
 
   "modifiers": {
@@ -140,7 +140,7 @@
     "[keycode]": {
       "type": "Number",
       "desc": "Key code to catch",
-      "examples": [ "v-touch-repeat.68=\"fnToCall\"" ]
+      "examples": [ "# v-touch-repeat.68=\"fnToCall\"" ]
     }
   }
 }

package/src/directives/{TouchSwipe.js → touch-swipe/TouchSwipe.js}

@@ -1,10 +1,10 @@
-import { client } from '../plugins/Platform.js'
+import { client } from '../../plugins/platform/Platform.js'
 
-import { createDirective } from '../utils/private/create.js'
-import { getModifierDirections, shouldStart } from '../utils/private/touch.js'
-import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
-import { clearSelection } from '../utils/private/selection.js'
-import getSSRProps from '../utils/private/noop-ssr-directive-transform.js'
+import { createDirective } from '../../utils/private.create/create.js'
+import { getModifierDirections, shouldStart } from '../../utils/private.touch/touch.js'
+import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, preventDraggable, noop } from '../../utils/event/event.js'
+import { clearSelection } from '../../utils/private.selection/selection.js'
+import getSSRProps from '../../utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.js'
 
 function parseArg (arg) {
   // delta (min velocity -- dist / time)

package/src/directives/{TouchSwipe.json → touch-swipe/TouchSwipe.json}

@@ -26,7 +26,7 @@
           "direction": {
             "type": "String",
             "desc": "Direction of movement",
-            "values": [ "up", "right", "down", "left" ]
+            "values": [ "'up'", "'right'", "'down'", "'left'" ]
           },
           "duration": {
             "type": "Number",
@@ -50,14 +50,14 @@
       }
     },
     "returns": null,
-    "examples": [ "v-touch-swipe=\"fnToCall\"", "v-touch-swipe=\"undefined\"" ]
+    "examples": [ "({ evt, touch, mouse, direction, duration, distance }) => { /* ... */ }" ]
   },
 
   "arg": {
     "type": "String",
     "desc": "x:y:z, where x is minimum velocity (dist/time; please use float without a dot, example: 6e-2 which is equivalent to 6 * 10^-2 = 0.06), y is minimum distance on first move on mobile, z is minimum distance on desktop until deciding if it's a swipe indeed",
-    "default": "6e-2:6:50",
-    "examples": [ "v-touch-swipe:7e-2:10:100=\"fnToCall\"" ]
+    "default": "'6e-2:6:50'",
+    "examples": [ "# v-touch-swipe:7e-2:10:100=\"fnToCall\"" ]
   },
 
   "modifiers": {

package/src/directives.js

@@ -1,14 +1,14 @@
-import ClosePopup from './directives/ClosePopup.js'
-import Intersection from './directives/Intersection.js'
-import Morph from './directives/Morph.js'
-import Mutation from './directives/Mutation.js'
-import Ripple from './directives/Ripple.js'
-import ScrollFire from './directives/ScrollFire.js'
-import Scroll from './directives/Scroll.js'
-import TouchHold from './directives/TouchHold.js'
-import TouchPan from './directives/TouchPan.js'
-import TouchRepeat from './directives/TouchRepeat.js'
-import TouchSwipe from './directives/TouchSwipe.js'
+import ClosePopup from './directives/close-popup/ClosePopup.js'
+import Intersection from './directives/intersection/Intersection.js'
+import Morph from './directives/morph/Morph.js'
+import Mutation from './directives/mutation/Mutation.js'
+import Ripple from './directives/ripple/Ripple.js'
+import ScrollFire from './directives/scroll-fire/ScrollFire.js'
+import Scroll from './directives/scroll/Scroll.js'
+import TouchHold from './directives/touch-hold/TouchHold.js'
+import TouchPan from './directives/touch-pan/TouchPan.js'
+import TouchRepeat from './directives/touch-repeat/TouchRepeat.js'
+import TouchSwipe from './directives/touch-swipe/TouchSwipe.js'
 
 export {
   ClosePopup,

package/src/index.dev.js

@@ -3,8 +3,8 @@
  */
 
 import installQuasar from './install-quasar.js'
-import lang from './lang.js'
-import iconSet from './icon-set.js'
+import Lang from './plugins/lang/Lang.js'
+import IconSet from './plugins/icon-set/IconSet.js'
 
 export * from './components.js'
 export * from './directives.js'
@@ -15,6 +15,12 @@ export * from './utils.js'
 export const Quasar = {
   version: __QUASAR_VERSION__,
   install: installQuasar,
-  lang,
-  iconSet
+
+  // TODO: remove in Qv3 (should only be used through the plugin)
+  // We provide a deprecated fallback here
+  lang: Lang,
+
+  // TODO: remove in Qv3 (should only be used through the plugin)
+  // We provide a deprecated fallback here
+  iconSet: IconSet
 }