quasar 2.15.2 → 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/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-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/scroll-fire/ScrollFire.json

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

package/src/directives/touch-hold/TouchHold.js

@@ -1,9 +1,9 @@
 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/touch-pan/TouchPan.js

@@ -1,10 +1,10 @@
 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/touch-repeat/TouchRepeat.js

@@ -1,10 +1,10 @@
 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/touch-swipe/TouchSwipe.js

@@ -1,10 +1,10 @@
 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/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
 }

package/src/index.prod.js

@@ -4,8 +4,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'
 
 import * as components from './components.js'
 import * as directives from './directives.js'
@@ -18,6 +18,7 @@ export * from './utils.js'
 
 export const Quasar = {
   version: __QUASAR_VERSION__,
+
   install (app, opts, ssrContext) {
     installQuasar(
       app,
@@ -25,6 +26,12 @@ export const Quasar = {
       ssrContext
     )
   },
-  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
 }

package/src/index.ssr.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'
 
 import * as components from './components.js'
 import * as directives from './directives.js'
@@ -17,6 +17,7 @@ export * from './utils.js'
 
 export const Quasar = {
   version: __QUASAR_VERSION__,
+
   install (app, opts, ssrContext) {
     installQuasar(
       app,
@@ -24,6 +25,12 @@ export const Quasar = {
       ssrContext
     )
   },
-  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
 }

package/src/index.umd.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'
 
 import * as components from './components.js'
 import * as directives from './directives.js'
@@ -18,6 +18,7 @@ if (window.Vue === void 0) {
 
 window.Quasar = {
   version: __QUASAR_VERSION__,
+
   install (app, opts) {
     installQuasar(app, {
       components,
@@ -26,8 +27,15 @@ window.Quasar = {
       ...opts
     })
   },
-  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,
+
   ...components,
   ...directives,
   ...plugins,

package/src/install-quasar.js

@@ -3,15 +3,20 @@ import { createApp } from 'vue'
 import Platform, { isRuntimeSsrPreHydration } from './plugins/platform/Platform.js'
 import Screen from './plugins/screen/Screen.js'
 import Dark from './plugins/dark/Dark.js'
-import History from './history.js'
-import Lang from './lang.js'
-import Body from './body.js'
-import IconSet from './icon-set.js'
-
-import { quasarKey } from './utils/private/symbols.js'
-import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private/global-config.js'
-import { isObject } from './utils/is.js'
-
+import Body from './plugins/private.body/Body.js'
+import History from './plugins/private.history/History.js'
+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 { isObject } from './utils/is/is.js'
+
+/**
+ * If the list below changes, make sure
+ * to also edit /ui/testing/specs/generators/generator.plugin.js
+ * on the "autoInstalledPlugins" array
+ */
 const autoInstalledPlugins = [
   Platform,
   Body,

package/src/plugins/addressbar/AddressbarColor.js

@@ -1,6 +1,6 @@
 import { client } from '../platform/Platform.js'
-import { noop } from '../../utils/event.js'
-import getCssVar from '../../utils/get-css-var.js'
+import { noop } from '../../utils/event/event.js'
+import getCssVar from '../../utils/css-var/get-css-var.js'
 
 let metaValue
 

package/src/plugins/addressbar/AddressbarColor.json

@@ -15,7 +15,8 @@
           "required": true,
           "examples": [ "'#ff0000'" ]
         }
-      }
+      },
+      "returns": null
     }
   }
 }

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

@@ -1,5 +1,5 @@
-import defineReactivePlugin from '../../utils/private/define-reactive-plugin.js'
-import { changeGlobalNodesTarget } from '../../utils/private/global-nodes.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
+import { changeGlobalNodesTarget } from '../../utils/private.global/global-nodes.js'
 
 const prefixes = {}
 
@@ -51,7 +51,7 @@ function promisify (target, fn) {
   }
 }
 
-const Plugin = defineReactivePlugin({
+const Plugin = createReactivePlugin({
   isActive: false,
   activeEl: null
 }, {

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

@@ -44,6 +44,7 @@
 
     "exit": {
       "desc": "Request exiting out of Fullscreen mode",
+      "params": null,
       "returns": {
         "type": "Promise<void>",
         "desc": "A Promise which is resolved when exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.",

package/src/plugins/app-visibility/AppVisibility.js

@@ -1,7 +1,7 @@
-import defineReactivePlugin from '../../utils/private/define-reactive-plugin.js'
-import { injectProp } from '../../utils/private/inject-obj-prop.js'
+import { createReactivePlugin } from '../../utils/private.create/create.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
-const Plugin = defineReactivePlugin({
+const Plugin = createReactivePlugin({
   appVisible: true
 }, {
   install ({ $q }) {