quasar 2.11.7 → 2.11.9

package/dist/types/index.d.ts

@@ -2059,6 +2059,11 @@ export interface QCarouselProps {
    * Show thumbnails
    */
   thumbnails?: boolean | undefined;
+  /**
+   * Emitted when fullscreen state changes
+   * @param value Fullscreen state (showing/hidden)
+   */
+  onFullscreen?: (value: boolean) => void;
   /**
    * Emitted when the component changes the model; This event _isn't_ fired if the model is changed externally; Is also used by v-model
    * @param value New current panel name
@@ -3450,11 +3455,44 @@ export interface QEditorProps {
    * Text to display as placeholder
    */
   placeholder?: string | undefined;
+  /**
+   * Emitted when fullscreen state changes
+   * @param value Fullscreen state (showing/hidden)
+   */
+  onFullscreen?: (value: boolean) => void;
   /**
    * Emitted when the component needs to change the model; Is also used by v-model
    * @param value The pure HTML of the content
    */
   "onUpdate:modelValue"?: (value: string) => void;
+  /**
+   * Emitted after a dropdown in the toolbar has triggered show()
+   * @param evt JS event object
+   */
+  onDropdownShow?: (evt: Event) => void;
+  /**
+   * Emitted when a dropdown in the toolbar triggers show() but before it finishes doing it
+   * @param evt JS event object
+   */
+  onDropdownBeforeShow?: (evt: Event) => void;
+  /**
+   * Emitted after a dropdown in the toolbar has triggered hide()
+   * @param evt JS event object
+   */
+  onDropdownHide?: (evt: Event) => void;
+  /**
+   * Emitted when a dropdown in the toolbar triggers hide() but before it finishes doing it
+   * @param evt JS event object
+   */
+  onDropdownBeforeHide?: (evt: Event) => void;
+  /**
+   * Emitted when the toolbar for editing a link is shown
+   */
+  onLinkShow?: () => void;
+  /**
+   * Emitted when the toolbar for editing a link is hidden
+   */
+  onLinkHide?: () => void;
 }
 
 export interface QEditorSlots {}
@@ -10291,6 +10329,11 @@ export interface QTableProps {
         descending: boolean
       ) => readonly any[])
     | undefined;
+  /**
+   * Emitted when fullscreen state changes
+   * @param value Fullscreen state (showing/hidden)
+   */
+  onFullscreen?: (value: boolean) => void;
   /**
    * Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots
    * @param evt JS event object

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.11.7",
+  "version": "2.11.9",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -2385,6 +2385,19 @@
             }
           ],
           "events": [
+            {
+              "name": "fullscreen",
+              "arguments": [
+                {
+                  "name": "value",
+                  "type": "boolean",
+                  "description": "Fullscreen state (showing/hidden)",
+                  "doc-url": "https://v2.quasar.dev/vue-components/carousel"
+                }
+              ],
+              "description": "Emitted when fullscreen state changes",
+              "doc-url": "https://v2.quasar.dev/vue-components/carousel"
+            },
             {
               "name": "update:model-value",
               "arguments": [
@@ -4794,6 +4807,19 @@
             }
           ],
           "events": [
+            {
+              "name": "fullscreen",
+              "arguments": [
+                {
+                  "name": "value",
+                  "type": "boolean",
+                  "description": "Fullscreen state (showing/hidden)",
+                  "doc-url": "https://v2.quasar.dev/vue-components/editor"
+                }
+              ],
+              "description": "Emitted when fullscreen state changes",
+              "doc-url": "https://v2.quasar.dev/vue-components/editor"
+            },
             {
               "name": "update:model-value",
               "arguments": [
@@ -4806,6 +4832,68 @@
               ],
               "description": "Emitted when the component needs to change the model; Is also used by v-model",
               "doc-url": "https://v2.quasar.dev/vue-components/editor"
+            },
+            {
+              "name": "dropdown-show",
+              "arguments": [
+                {
+                  "name": "evt",
+                  "type": "Event",
+                  "description": "JS event object",
+                  "doc-url": "https://v2.quasar.dev/vue-components/editor"
+                }
+              ],
+              "description": "Emitted after a dropdown in the toolbar has triggered show()",
+              "doc-url": "https://v2.quasar.dev/vue-components/editor"
+            },
+            {
+              "name": "dropdown-before-show",
+              "arguments": [
+                {
+                  "name": "evt",
+                  "type": "Event",
+                  "description": "JS event object",
+                  "doc-url": "https://v2.quasar.dev/vue-components/editor"
+                }
+              ],
+              "description": "Emitted when a dropdown in the toolbar triggers show() but before it finishes doing it",
+              "doc-url": "https://v2.quasar.dev/vue-components/editor"
+            },
+            {
+              "name": "dropdown-hide",
+              "arguments": [
+                {
+                  "name": "evt",
+                  "type": "Event",
+                  "description": "JS event object",
+                  "doc-url": "https://v2.quasar.dev/vue-components/editor"
+                }
+              ],
+              "description": "Emitted after a dropdown in the toolbar has triggered hide()",
+              "doc-url": "https://v2.quasar.dev/vue-components/editor"
+            },
+            {
+              "name": "dropdown-before-hide",
+              "arguments": [
+                {
+                  "name": "evt",
+                  "type": "Event",
+                  "description": "JS event object",
+                  "doc-url": "https://v2.quasar.dev/vue-components/editor"
+                }
+              ],
+              "description": "Emitted when a dropdown in the toolbar triggers hide() but before it finishes doing it",
+              "doc-url": "https://v2.quasar.dev/vue-components/editor"
+            },
+            {
+              "name": "link-show",
+              "description": "Emitted when the toolbar for editing a link is shown",
+              "doc-url": "https://v2.quasar.dev/vue-components/editor"
+            },
+            {
+              "name": "link-hide",
+              "description": "Emitted when the toolbar for editing a link is hidden",
+              "doc-url": "https://v2.quasar.dev/vue-components/editor"
             }
           ],
           "slots": [],
@@ -16234,6 +16322,19 @@
             }
           ],
           "events": [
+            {
+              "name": "fullscreen",
+              "arguments": [
+                {
+                  "name": "value",
+                  "type": "boolean",
+                  "description": "Fullscreen state (showing/hidden)",
+                  "doc-url": "https://v2.quasar.dev/vue-components/table"
+                }
+              ],
+              "description": "Emitted when fullscreen state changes",
+              "doc-url": "https://v2.quasar.dev/vue-components/table"
+            },
             {
               "name": "row-click",
               "arguments": [

package/lang/ja.js

@@ -31,7 +31,7 @@ module.exports = {
     headerTitle: date => new Intl.DateTimeFormat('ja-JP', {
       weekday: 'short', month: 'short', day: 'numeric'
     }).format(date),
-    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
     format24h: true, // true
     pluralDay: '日間'
   },

package/lang/ja.mjs

@@ -26,7 +26,7 @@ export default {
     headerTitle: date => new Intl.DateTimeFormat('ja-JP', {
       weekday: 'short', month: 'short', day: 'numeric'
     }).format(date),
-    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
     format24h: true, // true
     pluralDay: '日間'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.11.7",
+  "version": "2.11.9",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -30,11 +30,13 @@
     "lint": "eslint --ext .js,.vue src dev",
     "lint-fix": "eslint --ext .js,.vue src dev --fix",
     "format:types": "prettier --write \"types/**/*.{d.ts,ts,json}\"",
+    "test:create": "node ./test/cypress/helpers/create-spec.js -c",
     "test:build": "node build/script.build.js js api && node build/script.build.js js transforms",
-    "test:component": "yarn test:build && cd ./dev && cypress open-ct && cd ..",
-    "test:component:run": "yarn test:build && cd ./dev && cypress run-ct && cd ..",
-    "test:component:ci": "yarn test:build && cd ./dev && cypress run-ct --record --parallel && cd ..",
-    "test:create": "node ./test/cypress/helpers/create-spec.js -c"
+    "test:e2e": "yarn test:build && cd ./dev && cross-env NODE_ENV=test start-test \"node ./script.dev.js\" http-get://localhost:9000 \"cypress open --e2e\" && cd ..",
+    "test:e2e:ci": "yarn test:build && cd ./dev && cross-env NODE_ENV=test start-test \"node ./script.dev.js\" http-get://localhost:9000 \"cypress run --e2e\" && cd ..",
+    "test:component": "yarn test:build && cd ./dev && cross-env NODE_ENV=test cypress open --component && cd ..",
+    "test:component:run": "yarn test:build && cd ./dev && cross-env NODE_ENV=test cypress run --component && cd ..",
+    "test:component:ci": "yarn test:build && cd ./dev && cross-env NODE_ENV=test cypress run --component --record --parallel && cd .."
   },
   "repository": {
     "type": "git",
@@ -70,13 +72,14 @@
   "devDependencies": {
     "@quasar/app-vite": "^1.2.0",
     "@quasar/extras": "^1.15.11",
-    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.1.2",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^5.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "autoprefixer": "^10.4.13",
     "babel-preset-es2015-rollup": "^3.0.0",
     "cli-highlight": "^2.1.11",
     "cssnano": "^5.1.14",
+    "cypress": "^12.7.0",
     "diff": "^5.1.0",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^17.0.0",

package/src/components/avatar/__tests__/{QAvatar.spec.js → QAvatar.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QAvatar from '../QAvatar.js'
 
 describe('Avatar API', () => {
@@ -7,7 +6,7 @@ describe('Avatar API', () => {
       describe('(prop): icon', () => {
         it('should render an icon', () => {
           const icon = 'bug_report'
-          mount(QAvatar, {
+          cy.mount(QAvatar, {
             props: {
               icon,
               color: 'grey'
@@ -28,7 +27,7 @@ describe('Avatar API', () => {
           // Doing em/rem units here does not work
           // Cypress looks at actual computed values in the browser
           const fontSize = '32px'
-          mount(QAvatar, {
+          cy.mount(QAvatar, {
             props: {
               size,
               fontSize,
@@ -46,7 +45,7 @@ describe('Avatar API', () => {
       describe('(prop): color', () => {
         it('should set a background color', () => {
           const color = 'red'
-          mount(QAvatar, {
+          cy.mount(QAvatar, {
             props: {
               color
             }
@@ -60,7 +59,7 @@ describe('Avatar API', () => {
       describe('(prop): text-color', () => {
         it('should set a text color', () => {
           const textColor = 'red'
-          mount(QAvatar, {
+          cy.mount(QAvatar, {
             props: {
               textColor
             }
@@ -73,7 +72,7 @@ describe('Avatar API', () => {
 
       describe('(prop): square', () => {
         it('should create a square avatar', () => {
-          mount(QAvatar, {
+          cy.mount(QAvatar, {
             props: {
               square: true,
               color: 'grey'
@@ -88,7 +87,7 @@ describe('Avatar API', () => {
 
       describe('(prop): rounded', () => {
         it('should create a rounded avatar', () => {
-          mount(QAvatar, {
+          cy.mount(QAvatar, {
             props: {
               rounded: true,
               color: 'grey'
@@ -106,7 +105,7 @@ describe('Avatar API', () => {
     describe('(slot): default', () => {
       it('render the text in the default slot', () => {
         const text = 'QQ'
-        mount(QAvatar, {
+        cy.mount(QAvatar, {
           slots: {
             // Using only a string here results in an error, this is a workaround
             default: () => text

package/src/components/badge/__tests__/{QBadge.spec.js → QBadge.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QBadge from '../QBadge.js'
 
 const defaultOptions = {
@@ -13,7 +12,7 @@ function mountQBadge (options = {}) {
     ...options.props
   }
 
-  return mount(QBadge, options)
+  return cy.mount(QBadge, options)
 }
 
 describe('Badge API', () => {

package/src/components/banner/__tests__/{QBanner.spec.js → QBanner.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QBanner from '../QBanner.js'
 
 describe('Banner API', () => {
@@ -6,7 +5,7 @@ describe('Banner API', () => {
     describe('Category: content', () => {
       describe('(prop): inline-actions', () => {
         it('should render the actions in the same row as the content', () => {
-          mount(QBanner, {
+          cy.mount(QBanner, {
             slots: {
               default: 'Banner content',
               action: 'Banner action'
@@ -25,7 +24,7 @@ describe('Banner API', () => {
     describe('Category: style', () => {
       describe('(prop): dense', () => {
         it('should have a dense style when "dense" prop is true', () => {
-          mount(QBanner, {
+          cy.mount(QBanner, {
             props: {
               dense: true
             }
@@ -38,7 +37,7 @@ describe('Banner API', () => {
 
       describe('(prop): rounded', () => {
         it('should have a rounded style when "rounded" prop is true', () => {
-          mount(QBanner, {
+          cy.mount(QBanner, {
             props: {
               rounded: true
             }
@@ -51,7 +50,7 @@ describe('Banner API', () => {
 
       describe('(prop): dark', () => {
         it('should have a dark style when "dark" prop is true', () => {
-          mount(QBanner, {
+          cy.mount(QBanner, {
             props: {
               dark: true
             }
@@ -67,7 +66,7 @@ describe('Banner API', () => {
   describe('Slots', () => {
     describe('(slot): default', () => {
       it('should render the default content', () => {
-        mount(QBanner, {
+        cy.mount(QBanner, {
           slots: {
             default: 'Banner content'
           }
@@ -80,7 +79,7 @@ describe('Banner API', () => {
 
     describe('(slot): avatar', () => {
       it('should render the avatar content', () => {
-        mount(QBanner, {
+        cy.mount(QBanner, {
           slots: {
             avatar: 'Banner avatar'
           }
@@ -93,7 +92,7 @@ describe('Banner API', () => {
 
     describe('(slot): action', () => {
       it('should render the action content', () => {
-        mount(QBanner, {
+        cy.mount(QBanner, {
           slots: {
             action: 'Banner action'
           }

package/src/components/bar/__tests__/{QBar.spec.js → QBar.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QBar from '../QBar.js'
 
 describe('Bar API', () => {
@@ -6,7 +5,7 @@ describe('Bar API', () => {
     describe('Category: style', () => {
       describe('(prop): dense', () => {
         it('should have a dense style when "dense" prop is true', () => {
-          mount(QBar, {
+          cy.mount(QBar, {
             propsData: {
               dense: true
             }
@@ -18,7 +17,7 @@ describe('Bar API', () => {
 
       describe('(prop): dark', () => {
         it('should have a dark style when "dark" prop is true', () => {
-          mount(QBar, {
+          cy.mount(QBar, {
             propsData: {
               dark: true
             }
@@ -33,7 +32,7 @@ describe('Bar API', () => {
   describe('Slots', () => {
     describe('(slot): default', () => {
       it('should render the default slot', () => {
-        mount(QBar, {
+        cy.mount(QBar, {
           slots: {
             default: 'default bar slot'
           }

package/src/components/breadcrumbs/__tests__/{QBreadcrumbs.spec.js → QBreadcrumbs.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import { alignMap, alignValues } from '../../../composables/private/use-align.js'
 import BasicBreadcrumbs from './BasicBreadcrumbs.vue'
 import BreadcrumbWithSeparatorSlot from './BreadcrumbWithSeparatorSlot.vue'
@@ -12,7 +11,7 @@ describe('Breadcrumbs API', () => {
         it('should render a custom separator based on the defined value', () => {
           const customSeparator = '>'
 
-          mount(BasicBreadcrumbs, {
+          cy.mount(BasicBreadcrumbs, {
             props: {
               separator: customSeparator
             }
@@ -24,7 +23,7 @@ describe('Breadcrumbs API', () => {
 
       describe('(prop): gutter', () => {
         it(`should render a breadcrumb with a gutter based on defined values: ${ gutterValues.join(', ') }`, () => {
-          mount(BasicBreadcrumbs)
+          cy.mount(BasicBreadcrumbs)
 
           // loop through each gutter value
           for (const gutter of gutterValues) {
@@ -35,7 +34,7 @@ describe('Breadcrumbs API', () => {
         })
 
         it('should render a breadcrumb with no gutter when the value is set to "none"', () => {
-          mount(BasicBreadcrumbs, {
+          cy.mount(BasicBreadcrumbs, {
             props: {
               gutter: 'none'
             }
@@ -47,7 +46,7 @@ describe('Breadcrumbs API', () => {
 
       describe('(prop): align', () => {
         it(`should render a breadcrumb aligned based on defined values: ${ alignValues.join(', ') }`, () => {
-          mount(BasicBreadcrumbs)
+          cy.mount(BasicBreadcrumbs)
 
           // loop over alignValues
           for (const align of alignValues) {
@@ -64,7 +63,7 @@ describe('Breadcrumbs API', () => {
         it('should change breadcrumb item color based on Quasar Color Palette', () => {
           const activeColor = 'red'
 
-          mount(BasicBreadcrumbs, {
+          cy.mount(BasicBreadcrumbs, {
             props: {
               activeColor
             }
@@ -78,7 +77,7 @@ describe('Breadcrumbs API', () => {
         it('should change breadcrumb separator color based on Quasar Color Palette', () => {
           const separatorColor = 'red'
 
-          mount(BasicBreadcrumbs, {
+          cy.mount(BasicBreadcrumbs, {
             props: {
               separatorColor
             }
@@ -93,7 +92,7 @@ describe('Breadcrumbs API', () => {
   describe('Slots', () => {
     describe('(slot): default', () => {
       it('should display the default slot content', () => {
-        mount(BasicBreadcrumbs)
+        cy.mount(BasicBreadcrumbs)
 
         cy.get('.q-breadcrumbs > div')
           .should('contain', 'Home')
@@ -102,7 +101,7 @@ describe('Breadcrumbs API', () => {
 
     describe('(slot): separator', () => {
       it('should display the separator slot content', () => {
-        mount(BreadcrumbWithSeparatorSlot)
+        cy.mount(BreadcrumbWithSeparatorSlot)
 
         cy.get('.q-breadcrumbs__separator')
           .should('contain', 'arrow_forward')

package/src/components/breadcrumbs/__tests__/{QBreadcrumbsEl.spec.js → QBreadcrumbsEl.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QBreadcrumbsEl from '../QBreadcrumbsEl.js'
 
 describe('BreadcrumbsEl API', () => {
@@ -8,7 +7,7 @@ describe('BreadcrumbsEl API', () => {
         it('should render a label inside the breadcrumb element', () => {
           const label = 'Breadcrumb label'
 
-          mount(QBreadcrumbsEl, {
+          cy.mount(QBreadcrumbsEl, {
             props: { label }
           })
 
@@ -21,7 +20,7 @@ describe('BreadcrumbsEl API', () => {
         it('should render on the left of the breadcrumb element', () => {
           const icon = 'home'
 
-          mount(QBreadcrumbsEl, {
+          cy.mount(QBreadcrumbsEl, {
             props: { icon }
           })
 
@@ -34,7 +33,7 @@ describe('BreadcrumbsEl API', () => {
         it('should render a custom tag', () => {
           const tag = 'a'
 
-          mount(QBreadcrumbsEl, {
+          cy.mount(QBreadcrumbsEl, {
             props: { tag }
           })
 
@@ -56,7 +55,7 @@ describe('BreadcrumbsEl API', () => {
       it('should render the default slot', () => {
         const label = 'Breadcrumb label'
 
-        mount(QBreadcrumbsEl, {
+        cy.mount(QBreadcrumbsEl, {
           slots: { default: label }
         })
 
@@ -71,7 +70,7 @@ describe('BreadcrumbsEl API', () => {
       it('should emit "click" event when clicked', () => {
         const fn = cy.stub()
 
-        mount(QBreadcrumbsEl, {
+        cy.mount(QBreadcrumbsEl, {
           props: {
             label: 'clicked breadcrumb',
             onClick: fn

package/src/components/btn/__tests__/{QBtn.spec.js → QBtn.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QBtn from '../QBtn.js'
 
 const defaultOptions = {
@@ -11,7 +10,7 @@ function mountQBtn (options = {}) {
     ...options.props
   }
 
-  return mount(QBtn, options)
+  return cy.mount(QBtn, options)
 }
 
 describe('Btn API', () => {
@@ -118,10 +117,10 @@ describe('Btn API', () => {
           props: {
             onClick: fn
           }
+        }).then(({ wrapper }) => {
+          wrapper.vm.click()
+          return expect(fn).to.be.calledOnce
         })
-
-        cy.get('.q-btn').invoke('click')
-          .then(() => expect(fn).to.be.calledOnce)
       })
     })
   })

package/src/components/btn/__tests__/{use-btn.spec.js → use-btn.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import { alignMap, alignValues } from '../../../composables/private/use-align.js'
 import QBtn from '../QBtn.js'
@@ -36,7 +35,7 @@ function mountQBtn (options = {}) {
     }
   })
 
-  return mount(QBtn, options)
+  return cy.mount(QBtn, options)
 }
 
 describe('use-btn API', () => {

package/src/components/chip/__tests__/{QChip.spec.js → QChip.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QChip, { defaultSizes } from '../QChip.js'
 
 const defaultOptions = {
@@ -13,7 +12,7 @@ function mountQChip (options = {}) {
     ...options.props
   }
 
-  return mount(QChip, options)
+  return cy.mount(QChip, options)
 }
 
 describe('Chip API', () => {

package/src/components/editor/QEditor.js

@@ -76,7 +76,13 @@ export default createComponent({
     ...useFullscreenEmits,
     'update:modelValue',
     'keydown', 'click', 'mouseup', 'keyup', 'touchend',
-    'focus', 'blur'
+    'focus', 'blur',
+    'dropdownShow',
+    'dropdownHide',
+    'dropdownBeforeShow',
+    'dropdownBeforeHide',
+    'linkShow',
+    'linkHide'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -233,6 +239,7 @@ export default createComponent({
       $q,
       props,
       slots,
+      emit,
       // caret (will get injected after mount)
       inFullscreen,
       toggleFullscreen,
@@ -253,6 +260,10 @@ export default createComponent({
       }
     })
 
+    watch(editLinkUrl, v => {
+      emit(`link-${ v ? 'Show' : 'Hide' }`)
+    })
+
     const hasToolbar = computed(() => props.toolbar && props.toolbar.length > 0)
 
     const keys = computed(() => {