quasar 2.15.2 → 2.15.4

package/src/utils/{prevent-scroll.js → scroll/prevent-scroll.js}

@@ -1,6 +1,6 @@
-import { getEventPath, listenOpts, stopAndPrevent } from '../utils/event.js'
-import { hasScrollbar, getVerticalScrollPosition, getHorizontalScrollPosition } from '../utils/scroll.js'
-import { client } from '../plugins/platform/Platform.js'
+import { hasScrollbar, getVerticalScrollPosition, getHorizontalScrollPosition } from './scroll.js'
+import { getEventPath, listenOpts, stopAndPrevent } from '../event/event.js'
+import { client } from '../../plugins/platform/Platform.js'
 
 let
   registered = 0,

package/src/utils/{scroll.js → scroll/scroll.js}

@@ -1,4 +1,4 @@
-import { css, getElement } from './dom.js'
+import { css, getElement } from '../dom/dom.js'
 
 const scrollTargets = __QUASAR_SSR_SERVER__
   ? []

package/src/utils/throttle/throttle.test.js

@@ -0,0 +1,146 @@
+import {
+  describe, test, expect, vi,
+  beforeEach, afterEach
+} from 'vitest'
+
+import throttle from './throttle.js'
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.clearAllTimers()
+  vi.restoreAllMocks()
+})
+
+describe('[throttle API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        expect(
+          throttle(() => {})
+        ).toBeTypeOf('function')
+      })
+
+      test('repeated rapid calls', () => {
+        const callback = vi.fn()
+        const fn = throttle(callback, 100)
+
+        fn()
+        fn()
+        fn()
+        fn()
+
+        vi.advanceTimersByTime(350)
+
+        expect(callback).toHaveBeenCalledTimes(1)
+      })
+
+      test('zero timeout', () => {
+        const callback = vi.fn()
+        const fn = throttle(callback, 0)
+
+        fn()
+        fn()
+
+        vi.advanceTimersByTime(1)
+
+        expect(callback).toHaveBeenCalledTimes(1)
+
+        fn()
+
+        expect(callback).toHaveBeenCalledTimes(2)
+      })
+
+      test('should execute with correct args when called again from within timeout', () => {
+        const callback = vi.fn()
+        const fn = throttle(callback, 100)
+
+        fn(1)
+        fn(2)
+        fn(3)
+
+        vi.advanceTimersByTime(50)
+
+        fn(4)
+
+        vi.advanceTimersByTime(50)
+
+        expect(callback).toHaveBeenCalledTimes(1)
+        expect(callback).toHaveBeenCalledWith(1)
+      })
+
+      test('single call', () => {
+        const callback = vi.fn()
+        const fn = throttle(callback, 100)
+
+        fn()
+
+        vi.advanceTimersByTime(150)
+
+        expect(callback).toHaveBeenCalledTimes(1)
+      })
+
+      test('long wait time', () => {
+        const callback = vi.fn()
+        const fn = throttle(callback, 10_000)
+
+        fn()
+        fn()
+
+        vi.advanceTimersByTime(10_000)
+
+        expect(callback).toHaveBeenCalledTimes(1)
+      })
+
+      test('function arguments preservation', () => {
+        const callback = vi.fn()
+        const fn = throttle(callback, 100)
+
+        fn(1, 2, '3')
+
+        vi.advanceTimersByTime(50)
+
+        fn(4, 5, 6)
+
+        vi.advanceTimersByTime(50)
+
+        expect(callback).toHaveBeenCalledTimes(1)
+        expect(callback).toHaveBeenCalledWith(1, 2, '3')
+      })
+
+      test('multiple independent instances', () => {
+        const callback1 = vi.fn()
+        const callback2 = vi.fn()
+        const fn1 = throttle(callback1, 100)
+        const fn2 = throttle(callback2, 200)
+
+        fn1()
+        fn2()
+
+        vi.advanceTimersByTime(150)
+
+        expect(callback1).toHaveBeenCalledTimes(1)
+        expect(callback2).toHaveBeenCalledTimes(1)
+
+        fn1()
+        fn2()
+
+        vi.advanceTimersByTime(100)
+
+        expect(callback1).toHaveBeenCalledTimes(2)
+        expect(callback2).toHaveBeenCalledTimes(1)
+      })
+
+      test('no calls made', () => {
+        const callback = vi.fn()
+        throttle(callback, 100)
+
+        vi.runAllTimers()
+
+        expect(callback).not.toHaveBeenCalled()
+      })
+    })
+  })
+})

package/src/utils/uid/uid.test.js

@@ -0,0 +1,17 @@
+import { describe, test, expect } from 'vitest'
+
+import uid from './uid.js'
+
+describe('[uid API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        const result = uid()
+        expect(result).toBeTypeOf('string')
+        expect(result).toHaveLength(36)
+
+        expect(uid()).not.toBe(result)
+      })
+    })
+  })
+})

package/src/utils.js

@@ -1,27 +1,27 @@
-import clone from './utils/clone.js'
-import colors from './utils/colors.js'
-import copyToClipboard from './utils/copy-to-clipboard.js'
-import createMetaMixin from './utils/create-meta-mixin.js'
-import createUploaderComponent from './utils/create-uploader-component.js'
-import date from './utils/date.js'
-import debounce from './utils/debounce.js'
-import dom from './utils/dom.js'
-import EventBus from './utils/EventBus.js'
-import event, { noop } from './utils/event.js'
-import exportFile from './utils/export-file.js'
-import extend from './utils/extend.js'
-import format from './utils/format.js'
-import frameDebounce from './utils/frame-debounce.js'
-import getCssVar from './utils/get-css-var.js'
-import is from './utils/is.js'
-import morph from './utils/morph.js'
-import openURL from './utils/open-url.js'
-import patterns from './utils/patterns.js'
-import runSequentialPromises from './utils/run-sequential-promises.js'
-import scroll from './utils/scroll.js'
-import setCssVar from './utils/set-css-var.js'
-import throttle from './utils/throttle.js'
-import uid from './utils/uid.js'
+import clone from './utils/clone/clone.js'
+import colors from './utils/colors/colors.js'
+import copyToClipboard from './utils/copy-to-clipboard/copy-to-clipboard.js'
+import createMetaMixin from './utils/create-meta-mixin/create-meta-mixin.js'
+import createUploaderComponent from './utils/create-uploader-component/create-uploader-component.js'
+import date from './utils/date/date.js'
+import debounce from './utils/debounce/debounce.js'
+import dom from './utils/dom/dom.js'
+import EventBus from './utils/EventBus/EventBus.js'
+import event, { noop } from './utils/event/event.js'
+import exportFile from './utils/export-file/export-file.js'
+import extend from './utils/extend/extend.js'
+import format from './utils/format/format.js'
+import frameDebounce from './utils/frame-debounce/frame-debounce.js'
+import getCssVar from './utils/css-var/get-css-var.js'
+import is from './utils/is/is.js'
+import morph from './utils/morph/morph.js'
+import openURL from './utils/open-url/open-url.js'
+import patterns from './utils/patterns/patterns.js'
+import runSequentialPromises from './utils/run-sequential-promises/run-sequential-promises.js'
+import scroll from './utils/scroll/scroll.js'
+import setCssVar from './utils/css-var/set-css-var.js'
+import throttle from './utils/throttle/throttle.js'
+import uid from './utils/uid/uid.js'
 
 export {
   clone,

package/src/vue-plugin.js

@@ -1,10 +1,18 @@
 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 default {
+  name: '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/Lang.json

@@ -1,19 +0,0 @@
-{
-  "meta": {
-    "docsUrl": "https://v2.quasar.dev/options/quasar-language-packs"
-  },
-
-  "internal": true,
-
-  "quasarConfOptions": {
-    "propName": "lang",
-    "type": "Object",
-    "definition": {
-      "noHtmlAttrs": {
-        "type": "Boolean",
-        "addedIn": "v2.11.3",
-        "desc": "Whether to disable 'dir' and 'lang' HTML attributes getting added to the '<html>' tag. The 'dir' attribute is crucial when using RTL support. Disable this only if you need to handle these yourself for some reason."
-      }
-    }
-  }
-}

package/src/api-file-example.json

@@ -1,94 +0,0 @@
-{
-  "props": {
-    "hidden": {
-      "type": "Boolean",
-      "desc": "Puts component into 'hidden' mode",
-      "category": "state"
-    },
-
-    "width": {
-      "type": [ "Number", "String" ],
-      "desc": "Component width (in pixels)",
-      "examples": [ "300", "'400'" ],
-      "category": "style"
-    },
-
-    "position": {
-      "type": "String",
-      "desc": "Positions component at one of the edges of the screen",
-      "examples": [ "'bottom'" ],
-      "required": true,
-      "default": "'top'",
-      "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
-      "category": "content"
-    },
-
-    "font-size": {
-      "type": "String",
-      "desc": "The size in CSS units, including unit name, of the content (icon, text)",
-      "examples": [ "'18px'", "'2rem'" ],
-      "category": "style"
-    },
-
-    "color": {
-      "extends": "color"
-    },
-
-    "size": {
-      "extends": "size",
-      "desc": "My better description"
-    }
-  },
-
-  "slots": {
-    "default": {
-      "extends": "default"
-    },
-
-    "icon": {
-      "desc": "Slot for replacing the default dropdown icon"
-    },
-
-    "item": {
-      "desc": "Scoped slot for displaying each uploaded file"
-    }
-  },
-
-  "events": {
-    "update:model-value": {
-      "extends": "update:model-value"
-    },
-
-    "click": {
-      "desc": "Emitted on QChip click if 'clickable' property is set",
-      "params": {
-        "evt": {
-          "type": "Event",
-          "desc": "JS event object"
-        }
-      }
-    }
-  },
-
-  "methods": {
-    "show": {
-      "extends": "show"
-    },
-
-    "showNow": {
-      "extends": "show",
-      "desc": "My better description"
-    },
-
-    "hide": {
-      "params": {
-        "evt": {
-          "type": "Event",
-          "required": false,
-          "desc": "JS event object"
-        }
-      },
-      "desc": "Triggers component to hide"
-    }
-  }
-}

package/src/composables/private/__tests__/use-form.cy.js

@@ -1,11 +0,0 @@
-describe('use-form API', () => {
-  describe('Props', () => {
-    describe('Category: behavior', () => {
-      describe('(prop): name', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
-    })
-  })
-})

package/src/composables/private/__tests__/use-size.cy.js

@@ -1,36 +0,0 @@
-import QAvatar from '../../../components/avatar/QAvatar.js'
-import { useSizeDefaults } from '../use-size.js'
-
-describe('use-size API', () => {
-  describe('Props', () => {
-    describe('Category: style', () => {
-      describe('(prop): size', () => {
-        it('should set the size', () => {
-          const size = '24px'
-          cy.mount(QAvatar, {
-            props: {
-              size,
-              color: 'grey'
-            }
-          })
-
-          cy.get('.q-avatar')
-            .should('have.css', 'font-size', size)
-        })
-
-        it('should set the size with standard size names', () => {
-          const size = 'sm'
-          cy.mount(QAvatar, {
-            props: {
-              size,
-              color: 'grey'
-            }
-          })
-
-          cy.get('.q-avatar')
-            .should('have.css', 'font-size', `${ useSizeDefaults.sm }px`)
-        })
-      })
-    })
-  })
-})

package/src/composables/private/__tests__/use-transition.cy.js

@@ -1,111 +0,0 @@
-import WrapperOne from '../../../components/menu/__tests__/WrapperOne.vue'
-
-describe('use-transition API', () => {
-  describe('Props', () => {
-    describe('Category: transition', () => {
-      describe('(prop): transition-show', () => {
-        it('should use the fade transition by default', () => {
-          cy.mount(WrapperOne)
-          cy.dataCy('wrapper')
-            .click()
-          cy.dataCy('menu', { timeout: 0 }) // Disable retry
-            .should('have.class', 'q-transition--fade-enter-active')
-        })
-
-        it('should use a different show transition if defined', () => {
-          const transition = 'scale'
-          cy.mount(WrapperOne, {
-            props: {
-              transitionShow: transition
-            }
-          })
-          cy.dataCy('wrapper')
-            .click()
-          cy.dataCy('menu', { timeout: 0 }) // Disable retry
-            .should('have.class', `q-transition--${ transition }-enter-active`)
-        })
-      })
-
-      describe('(prop): transition-hide', () => {
-        it('should use the fade transition by default', () => {
-          cy.mount(WrapperOne)
-          cy.dataCy('wrapper')
-            .click()
-          cy.dataCy('menu')
-            .should('exist')
-          cy.get('body')
-            .type('{esc}')
-          cy.dataCy('menu', { timeout: 0 }) // Disable retry
-            .should('have.class', 'q-transition--fade-leave-active')
-        })
-
-        it('should use a different hide transition if defined', () => {
-          const transition = 'scale'
-          cy.mount(WrapperOne, {
-            props: {
-              transitionHide: transition
-            }
-          })
-          cy.dataCy('wrapper')
-            .click()
-          cy.dataCy('menu')
-            .should('exist')
-          cy.get('body')
-            .type('{esc}')
-          cy.dataCy('menu', { timeout: 0 }) // Disable retry
-            .should('have.class', `q-transition--${ transition }-leave-active`)
-        })
-      })
-
-      describe('(prop): transition-duration', () => {
-        it('should be done with transitioning after 300ms passed', () => {
-          cy.mount(WrapperOne)
-          cy.dataCy('wrapper')
-            .click()
-          // eslint-disable-next-line cypress/no-unnecessary-waiting
-          cy.wait(300)
-          cy.dataCy('menu', { timeout: 350 })
-            .should('not.have.class', 'q-transition--fade-enter-active')
-        })
-
-        it('should not be done with transitioning before 300ms passed', () => {
-          cy.mount(WrapperOne)
-          cy.dataCy('wrapper')
-            .click()
-          // eslint-disable-next-line cypress/no-unnecessary-waiting
-          cy.wait(200) // Commands take some time so a high value can fail, just take a decent margin
-          cy.dataCy('menu', { timeout: 0 }) // Disable retry
-            .should('have.class', 'q-transition--fade-enter-active')
-        })
-
-        it('should be done after a custom 1000ms passed', () => {
-          cy.mount(WrapperOne, {
-            props: {
-              transitionDuration: 1000
-            }
-          })
-          cy.dataCy('wrapper')
-            .click()
-          // eslint-disable-next-line cypress/no-unnecessary-waiting
-          cy.wait(1000)
-          cy.dataCy('menu', { timeout: 0 }) // Disable retry
-            .should('not.have.class', 'q-transition--fade-enter-active')
-        })
-
-        it('should not be done before a custom 1000ms passed', () => {
-          cy.mount(WrapperOne, {
-            props: {
-              transitionDuration: 1000
-            }
-          })
-          cy.dataCy('wrapper')
-            .click()
-          // eslint-disable-next-line cypress/no-unnecessary-waiting
-          cy.wait(900)
-          cy.dataCy('menu', { timeout: 0 }) // Disable retry
-            .should('have.class', 'q-transition--fade-enter-active')
-        })
-      })
-    })
-  })
-})

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

@@ -1,93 +0,0 @@
-import { describe, test, expect } from 'vitest'
-import { computed } from 'vue'
-
-import { useFormAttrs, useFormInject, useFormInputNameAttr } from './use-form.js'
-
-describe('[useForm API]', () => {
-  describe('useForm', () => {
-    test('useForm(props)', () => {
-      const { value: result } = useFormAttrs({
-        name: 'MyName',
-        modelValue: 'MyModelValue'
-      })
-
-      expect(result).toBeTruthy()
-      expect(result.name).toBe('MyName')
-      expect(result.value).toBe('MyModelValue')
-    })
-  })
-
-  describe('useFormInputNameAttr', () => {
-    test('useFormInputNameAttr()', () => {
-      const fn = useFormInject()
-
-      expect(typeof fn).toBe('function')
-
-      const acc = []
-      fn(acc, 'push')
-      fn(acc, 'push', ' MyClassName')
-
-      expect(acc.length).toBe(2)
-
-      expect(acc[ 0 ].type).toBe('input')
-      expect(Object.keys(acc[ 0 ].props).length).toBe(1)
-      expect(acc[ 0 ].props.class).toBe('hidden')
-
-      expect(acc[ 1 ].type).toBe('input')
-      expect(Object.keys(acc[ 1 ].props).length).toBe(1)
-      expect(acc[ 1 ].props.class).toBe('hidden MyClassName')
-    })
-
-    test('useFormInputNameAttr(formAttrs)', () => {
-      const fn = useFormInject(
-        computed(() => ({
-          myAttr: 'MyAttrValue'
-        }))
-      )
-
-      const acc = []
-
-      fn(acc, 'push')
-      fn(acc, 'push', ' MyClassName')
-
-      expect(acc.length).toBe(2)
-
-      expect(acc[ 0 ].type).toBe('input')
-      expect(Object.keys(acc[ 0 ].props).length).toBe(2)
-      expect(acc[ 0 ].props.class).toBe('hidden')
-      expect(acc[ 0 ].props.myAttr).toBe('MyAttrValue')
-
-      expect(acc[ 1 ].type).toBe('input')
-      expect(Object.keys(acc[ 1 ].props).length).toBe(2)
-      expect(acc[ 1 ].props.class).toBe('hidden MyClassName')
-      expect(acc[ 1 ].props.myAttr).toBe('MyAttrValue')
-    })
-  })
-
-  describe('useFormInputNameAttr', () => {
-    test('useFormInputNameAttr({ name })', () => {
-      const { value: result } = useFormInputNameAttr({
-        name: 'MyName'
-      })
-
-      expect(result).toBe('MyName')
-    })
-
-    test('useFormInputNameAttr({ for })', () => {
-      const { value: result } = useFormInputNameAttr({
-        for: 'MyFor'
-      })
-
-      expect(result).toBe('MyFor')
-    })
-
-    test('useFormInputNameAttr({ name, for })', () => {
-      const { value: result } = useFormInputNameAttr({
-        name: 'MyName',
-        for: 'MyFor'
-      })
-
-      expect(result).toBe('MyName')
-    })
-  })
-})

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

@@ -1,27 +0,0 @@
-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-size.test.js

@@ -1,22 +0,0 @@
-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')
-    })
-  })
-})