quasar 2.12.7 → 2.13.0

package/dist/types/index.d.ts

@@ -5181,7 +5181,6 @@ export interface QFieldSlots {
      */
     emitValue: (value: any) => void;
   }) => VNode[];
-  rawControl: () => VNode[];
 }
 
 export interface QField extends ComponentPublicInstance<QFieldProps> {
@@ -9062,7 +9061,7 @@ export interface QSelectProps {
    */
   emitValue?: boolean | undefined;
   /**
-   * Debounce the input model update with an amount of milliseconds
+   * Debounce the input model update with an amount of milliseconds (also affects the 'filter' event, if used)
    * Default value: 500
    */
   inputDebounce?: number | string | undefined;
@@ -10927,7 +10926,7 @@ export interface QTableProps {
          */
         sortable?: boolean;
         /**
-         * Compare function if you have some custom data or want a specific way to compare two rows
+         * Compare function if you have some custom data or want a specific way to compare two rows; rows with null/undefined values will get sorted without triggering this method (use 'rawSort' instead if you want to handle those values too)
          * @param a Value of the first comparison term
          * @param b Value of the second comparison term
          * @param rowA Full Row object in which is contained the first term
@@ -10935,6 +10934,15 @@ export interface QTableProps {
          * @returns Comparison result of term 'a' with term 'b'. Less than 0 when 'a' should come first; greater than 0 if 'b' should come first; equal to 0 if their position must not be changed with respect to each other
          */
         sort?: (a: any, b: any, rowA: any, rowB: any) => number;
+        /**
+         * Compare function if you have some custom data or want a specific way to compare two rows; includes rows with null/undefined values (use 'sort' instead if you don't want that)
+         * @param a Value of the first comparison term
+         * @param b Value of the second comparison term
+         * @param rowA Full Row object in which is contained the first term
+         * @param rowB Full Row object in which is contained the second term
+         * @returns Comparison result of term 'a' with term 'b'. Less than 0 when 'a' should come first; greater than 0 if 'b' should come first; equal to 0 if their position must not be changed with respect to each other
+         */
+        rawSort?: (a: any, b: any, rowA: any, rowB: any) => number;
         /**
          * Set column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending); Overrides the 'column-sort-order' prop
          * Default value: ad
@@ -15579,6 +15587,8 @@ declare module "./lang" {
     ca: true;
     cs: true;
     da: true;
+    "de-CH": true;
+    "de-DE": true;
     de: true;
     el: true;
     "en-GB": true;

package/dist/vetur/quasar-attributes.json

@@ -4105,7 +4105,7 @@
   },
   "q-select/input-debounce": {
     "type": "number|string",
-    "description": "Debounce the input model update with an amount of milliseconds"
+    "description": "Debounce the input model update with an amount of milliseconds (also affects the 'filter' event, if used)"
   },
   "q-select/input-class": {
     "type": "string|array|object",

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.12.7",
+  "version": "2.13.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -6405,10 +6405,6 @@
               "name": "control",
               "description": "Slot for controls; Suggestion QSlider, QRange, QKnob, ...",
               "doc-url": "https://v2.quasar.dev/vue-components/field"
-            },
-            {
-              "name": "rawControl",
-              "doc-url": "https://v2.quasar.dev/vue-components/field"
             }
           ],
           "description": "QField - Quasar component",
@@ -12993,7 +12989,7 @@
                 "kind": "expression",
                 "type": "number|string"
               },
-              "description": "Debounce the input model update with an amount of milliseconds",
+              "description": "Debounce the input model update with an amount of milliseconds (also affects the 'filter' event, if used)",
               "doc-url": "https://v2.quasar.dev/vue-components/select",
               "default": "500"
             },

package/lang/de-CH.js

@@ -0,0 +1,98 @@
+/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (de-CH.mjs).
+ */
+module.exports = {
+  isoName: 'de-CH',
+  nativeName: 'Deutsch (CH)',
+  label: {
+    clear: 'Leeren',
+    ok: 'Ok',
+    cancel: 'Abbrechen',
+    close: 'Schliessen',
+    set: 'Setzen',
+    select: 'Auswählen',
+    reset: 'Zurücksetzen',
+    remove: 'Löschen',
+    update: 'Aktualisieren',
+    create: 'Erstellen',
+    search: 'Suche',
+    filter: 'Filter',
+    refresh: 'Aktualisieren',
+    expand: label => (label ? `Erweitern Sie "${ label }"` : 'Erweitern'),
+    collapse: label => (label ? `"${ label }" minimieren` : 'Zusammenbruch')
+  },
+  date: {
+    days: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
+    daysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
+    months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
+    monthsShort: 'Jan_Feb_Mar_Apr_Mai_Jun_Jul_Aug_Sep_Okt_Nov_Dez'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: true,
+    pluralDay: 'Tage'
+  },
+  table: {
+    noData: 'Keine Daten vorhanden.',
+    noResults: 'Keine Einträge gefunden',
+    loading: 'Lade...',
+    selectedRecords: rows => (
+      rows > 1
+        ? rows + ' ausgewählte Zeilen'
+        : (rows === 0 ? 'Keine' : '1') + ' ausgewählt.'
+    ),
+    recordsPerPage: 'Zeilen pro Seite',
+    allRows: 'Alle',
+    pagination: (start, end, total) => start + '-' + end + ' von ' + total,
+    columns: 'Spalten'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'Fett',
+    italic: 'Kursiv',
+    strikethrough: 'Durchgestrichen',
+    underline: 'Unterstrichen',
+    unorderedList: 'Ungeordnete Liste',
+    orderedList: 'Geordnete Liste',
+    subscript: 'tiefgestellt',
+    superscript: 'hochgestellt',
+    hyperlink: 'Link',
+    toggleFullscreen: 'Vollbild umschalten',
+    quote: 'Zitat',
+    left: 'linksbündig',
+    center: 'zentriert',
+    right: 'rechtsbündig',
+    justify: 'Ausrichten',
+    print: 'Drucken',
+    outdent: 'ausrücken',
+    indent: 'einrücken',
+    removeFormat: 'Entferne Formatierung',
+    formatting: 'Formatiere',
+    fontSize: 'Schriftgrösse',
+    align: 'Ausrichten',
+    hr: 'Horizontale Linie einfügen',
+    undo: 'Rückgänging',
+    redo: 'Wiederherstellen',
+    heading1: 'Überschrift 1',
+    heading2: 'Überschrift 2',
+    heading3: 'Überschrift 3',
+    heading4: 'Überschrift 4',
+    heading5: 'Überschrift 5',
+    heading6: 'Überschrift 6',
+    paragraph: 'Absatz',
+    code: 'Code',
+    size1: 'Sehr klein',
+    size2: 'klein',
+    size3: 'Normal',
+    size4: 'Gross',
+    size5: 'Grösser',
+    size6: 'Sehr gross',
+    size7: 'Maximum',
+    defaultFont: 'Standard Schrift',
+    viewSource: 'Quelltext anzeigen'
+  },
+  tree: {
+    noNodes: 'Keine Knoten verfügbar',
+    noResults: 'Keine passenden Knoten gefunden'
+  }
+}

package/lang/de-CH.mjs

@@ -0,0 +1,93 @@
+export default {
+  isoName: 'de-CH',
+  nativeName: 'Deutsch (CH)',
+  label: {
+    clear: 'Leeren',
+    ok: 'Ok',
+    cancel: 'Abbrechen',
+    close: 'Schliessen',
+    set: 'Setzen',
+    select: 'Auswählen',
+    reset: 'Zurücksetzen',
+    remove: 'Löschen',
+    update: 'Aktualisieren',
+    create: 'Erstellen',
+    search: 'Suche',
+    filter: 'Filter',
+    refresh: 'Aktualisieren',
+    expand: label => (label ? `Erweitern Sie "${ label }"` : 'Erweitern'),
+    collapse: label => (label ? `"${ label }" minimieren` : 'Zusammenbruch')
+  },
+  date: {
+    days: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
+    daysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
+    months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
+    monthsShort: 'Jan_Feb_Mar_Apr_Mai_Jun_Jul_Aug_Sep_Okt_Nov_Dez'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: true,
+    pluralDay: 'Tage'
+  },
+  table: {
+    noData: 'Keine Daten vorhanden.',
+    noResults: 'Keine Einträge gefunden',
+    loading: 'Lade...',
+    selectedRecords: rows => (
+      rows > 1
+        ? rows + ' ausgewählte Zeilen'
+        : (rows === 0 ? 'Keine' : '1') + ' ausgewählt.'
+    ),
+    recordsPerPage: 'Zeilen pro Seite',
+    allRows: 'Alle',
+    pagination: (start, end, total) => start + '-' + end + ' von ' + total,
+    columns: 'Spalten'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'Fett',
+    italic: 'Kursiv',
+    strikethrough: 'Durchgestrichen',
+    underline: 'Unterstrichen',
+    unorderedList: 'Ungeordnete Liste',
+    orderedList: 'Geordnete Liste',
+    subscript: 'tiefgestellt',
+    superscript: 'hochgestellt',
+    hyperlink: 'Link',
+    toggleFullscreen: 'Vollbild umschalten',
+    quote: 'Zitat',
+    left: 'linksbündig',
+    center: 'zentriert',
+    right: 'rechtsbündig',
+    justify: 'Ausrichten',
+    print: 'Drucken',
+    outdent: 'ausrücken',
+    indent: 'einrücken',
+    removeFormat: 'Entferne Formatierung',
+    formatting: 'Formatiere',
+    fontSize: 'Schriftgrösse',
+    align: 'Ausrichten',
+    hr: 'Horizontale Linie einfügen',
+    undo: 'Rückgänging',
+    redo: 'Wiederherstellen',
+    heading1: 'Überschrift 1',
+    heading2: 'Überschrift 2',
+    heading3: 'Überschrift 3',
+    heading4: 'Überschrift 4',
+    heading5: 'Überschrift 5',
+    heading6: 'Überschrift 6',
+    paragraph: 'Absatz',
+    code: 'Code',
+    size1: 'Sehr klein',
+    size2: 'klein',
+    size3: 'Normal',
+    size4: 'Gross',
+    size5: 'Grösser',
+    size6: 'Sehr gross',
+    size7: 'Maximum',
+    defaultFont: 'Standard Schrift',
+    viewSource: 'Quelltext anzeigen'
+  },
+  tree: {
+    noNodes: 'Keine Knoten verfügbar',
+    noResults: 'Keine passenden Knoten gefunden'
+  }
+}

package/lang/de-DE.js

@@ -0,0 +1,98 @@
+/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (de-DE.mjs).
+ */
+module.exports = {
+  isoName: 'de-DE',
+  nativeName: 'Deutsch (DE)',
+  label: {
+    clear: 'Leeren',
+    ok: 'Ok',
+    cancel: 'Abbrechen',
+    close: 'Schließen',
+    set: 'Setzen',
+    select: 'Auswählen',
+    reset: 'Zurücksetzen',
+    remove: 'Löschen',
+    update: 'Aktualisieren',
+    create: 'Erstellen',
+    search: 'Suche',
+    filter: 'Filter',
+    refresh: 'Aktualisieren',
+    expand: label => (label ? `Erweitern Sie "${ label }"` : 'Erweitern'),
+    collapse: label => (label ? `"${ label }" minimieren` : 'Zusammenbruch')
+  },
+  date: {
+    days: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
+    daysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
+    months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
+    monthsShort: 'Jan_Feb_Mar_Apr_Mai_Jun_Jul_Aug_Sep_Okt_Nov_Dez'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: true,
+    pluralDay: 'Tage'
+  },
+  table: {
+    noData: 'Keine Daten vorhanden.',
+    noResults: 'Keine Einträge gefunden',
+    loading: 'Lade...',
+    selectedRecords: rows => (
+      rows > 1
+        ? rows + ' ausgewählte Zeilen'
+        : (rows === 0 ? 'Keine' : '1') + ' ausgewählt.'
+    ),
+    recordsPerPage: 'Zeilen pro Seite',
+    allRows: 'Alle',
+    pagination: (start, end, total) => start + '-' + end + ' von ' + total,
+    columns: 'Spalten'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'Fett',
+    italic: 'Kursiv',
+    strikethrough: 'Durchgestrichen',
+    underline: 'Unterstrichen',
+    unorderedList: 'Ungeordnete Liste',
+    orderedList: 'Geordnete Liste',
+    subscript: 'tiefgestellt',
+    superscript: 'hochgestellt',
+    hyperlink: 'Link',
+    toggleFullscreen: 'Vollbild umschalten',
+    quote: 'Zitat',
+    left: 'linksbündig',
+    center: 'zentriert',
+    right: 'rechtsbündig',
+    justify: 'Ausrichten',
+    print: 'Drucken',
+    outdent: 'ausrücken',
+    indent: 'einrücken',
+    removeFormat: 'Entferne Formatierung',
+    formatting: 'Formatiere',
+    fontSize: 'Schriftgröße',
+    align: 'Ausrichten',
+    hr: 'Horizontale Linie einfügen',
+    undo: 'Rückgänging',
+    redo: 'Wiederherstellen',
+    heading1: 'Überschrift 1',
+    heading2: 'Überschrift 2',
+    heading3: 'Überschrift 3',
+    heading4: 'Überschrift 4',
+    heading5: 'Überschrift 5',
+    heading6: 'Überschrift 6',
+    paragraph: 'Absatz',
+    code: 'Code',
+    size1: 'Sehr klein',
+    size2: 'klein',
+    size3: 'Normal',
+    size4: 'Groß',
+    size5: 'Größer',
+    size6: 'Sehr groß',
+    size7: 'Maximum',
+    defaultFont: 'Standard Schrift',
+    viewSource: 'Quelltext anzeigen'
+  },
+  tree: {
+    noNodes: 'Keine Knoten verfügbar',
+    noResults: 'Keine passenden Knoten gefunden'
+  }
+}

package/lang/de-DE.mjs

@@ -0,0 +1,93 @@
+export default {
+  isoName: 'de-DE',
+  nativeName: 'Deutsch (DE)',
+  label: {
+    clear: 'Leeren',
+    ok: 'Ok',
+    cancel: 'Abbrechen',
+    close: 'Schließen',
+    set: 'Setzen',
+    select: 'Auswählen',
+    reset: 'Zurücksetzen',
+    remove: 'Löschen',
+    update: 'Aktualisieren',
+    create: 'Erstellen',
+    search: 'Suche',
+    filter: 'Filter',
+    refresh: 'Aktualisieren',
+    expand: label => (label ? `Erweitern Sie "${ label }"` : 'Erweitern'),
+    collapse: label => (label ? `"${ label }" minimieren` : 'Zusammenbruch')
+  },
+  date: {
+    days: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
+    daysShort: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
+    months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
+    monthsShort: 'Jan_Feb_Mar_Apr_Mai_Jun_Jul_Aug_Sep_Okt_Nov_Dez'.split('_'),
+    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: true,
+    pluralDay: 'Tage'
+  },
+  table: {
+    noData: 'Keine Daten vorhanden.',
+    noResults: 'Keine Einträge gefunden',
+    loading: 'Lade...',
+    selectedRecords: rows => (
+      rows > 1
+        ? rows + ' ausgewählte Zeilen'
+        : (rows === 0 ? 'Keine' : '1') + ' ausgewählt.'
+    ),
+    recordsPerPage: 'Zeilen pro Seite',
+    allRows: 'Alle',
+    pagination: (start, end, total) => start + '-' + end + ' von ' + total,
+    columns: 'Spalten'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'Fett',
+    italic: 'Kursiv',
+    strikethrough: 'Durchgestrichen',
+    underline: 'Unterstrichen',
+    unorderedList: 'Ungeordnete Liste',
+    orderedList: 'Geordnete Liste',
+    subscript: 'tiefgestellt',
+    superscript: 'hochgestellt',
+    hyperlink: 'Link',
+    toggleFullscreen: 'Vollbild umschalten',
+    quote: 'Zitat',
+    left: 'linksbündig',
+    center: 'zentriert',
+    right: 'rechtsbündig',
+    justify: 'Ausrichten',
+    print: 'Drucken',
+    outdent: 'ausrücken',
+    indent: 'einrücken',
+    removeFormat: 'Entferne Formatierung',
+    formatting: 'Formatiere',
+    fontSize: 'Schriftgröße',
+    align: 'Ausrichten',
+    hr: 'Horizontale Linie einfügen',
+    undo: 'Rückgänging',
+    redo: 'Wiederherstellen',
+    heading1: 'Überschrift 1',
+    heading2: 'Überschrift 2',
+    heading3: 'Überschrift 3',
+    heading4: 'Überschrift 4',
+    heading5: 'Überschrift 5',
+    heading6: 'Überschrift 6',
+    paragraph: 'Absatz',
+    code: 'Code',
+    size1: 'Sehr klein',
+    size2: 'klein',
+    size3: 'Normal',
+    size4: 'Groß',
+    size5: 'Größer',
+    size6: 'Sehr groß',
+    size7: 'Maximum',
+    defaultFont: 'Standard Schrift',
+    viewSource: 'Quelltext anzeigen'
+  },
+  tree: {
+    noNodes: 'Keine Knoten verfügbar',
+    noResults: 'Keine passenden Knoten gefunden'
+  }
+}

package/lang/index.json

@@ -31,6 +31,14 @@
     "isoName": "da",
     "nativeName": "Dansk"
   },
+  {
+    "isoName": "de-CH",
+    "nativeName": "Deutsch (CH)"
+  },
+  {
+    "isoName": "de-DE",
+    "nativeName": "Deutsch (DE)"
+  },
   {
     "isoName": "de",
     "nativeName": "Deutsch"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.12.7",
+  "version": "2.13.0",
   "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",
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@quasar/app-vite": "^2.0.0-alpha.0",
     "@quasar/extras": "^1.16.4",
-    "@quasar/quasar-app-extension-testing-e2e-cypress": "^5.2.0-alpha.1",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^5.2.0-alpha.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "autoprefixer": "^10.4.13",
@@ -81,7 +81,7 @@
     "cli-highlight": "^2.1.11",
     "cross-env": "^7.0.3",
     "cssnano": "^5.1.14",
-    "cypress": "^12.13.0",
+    "cypress": "^13.2.0",
     "cypress-json-results": "^1.2.1",
     "diff": "^5.1.0",
     "eslint": "^8.41.0",
@@ -96,6 +96,7 @@
     "eslint-plugin-vue": "^9.14.1",
     "fast-glob": "^3.3.0",
     "module-alias": "^2.2.2",
+    "open": "^9.1.0",
     "postcss-rtlcss": "^4.0.6",
     "prettier": "^2.8.3",
     "recast": "^0.18.5",

package/src/components/field/__tests__/QField.cy.js

@@ -0,0 +1,156 @@
+import QField from '../QField'
+import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
+import { ref } from 'vue'
+import Icons from '../../../../icon-set/material-icons.mjs'
+
+function getHostElement () {
+  return cy.get('.q-field')
+}
+
+function mountQField (options) {
+  return cy.mount(QField, options)
+}
+
+describe('Field API', () => {
+  describe('Props', () => {
+    describe('Category: model', () => {
+      describe('(prop): maxlength', () => {
+        it.skip(' ', () => {
+          // It is tricky to test this since it will require that we setup a control slot with v-model.
+          // This is already tested in QInput and others using use-field composable, so are not not testing it.
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): control', () => {
+      it('should use control slot as content of the field', () => {
+        const controlSlot = 'Hello there'
+        mountQField({
+          slots: {
+            control: () => controlSlot
+          }
+        })
+
+        getHostElement().get('.q-field__control-container').should('contain', controlSlot)
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): update:model-value', () => {
+      it('should emit onUpdate:modelValue event', () => {
+        const model = ref('text')
+        const fn = cy.stub()
+        mountQField({
+          props: {
+            ...vModelAdapter(model),
+            'onUpdate:modelValue': fn,
+            clearable: true
+          }
+        })
+
+        getHostElement().get('button[type="button"]')
+          .contains(Icons.field.clear).click()
+          .then(() => {
+            expect(fn).to.be.calledWith()
+          })
+      })
+    })
+
+    describe('(event): focus', () => {
+      it('should emit the focus event', () => {
+        const fn = cy.stub()
+
+        mountQField({
+          props: {
+            onfocus: fn
+          },
+          slots: {
+            control: 'text'
+          }
+        })
+
+        getHostElement().click()
+
+        getHostElement().then(() => {
+          expect(fn).to.be.calledWith()
+        })
+      })
+    })
+
+    describe('(event): blur', () => {
+      it('should emit blur event', () => {
+        const fn = cy.stub()
+        mountQField({
+          props: {
+            onblur: fn
+          },
+          slots: {
+            control: 'text'
+          }
+        })
+
+        getHostElement()
+          .click()
+
+        getHostElement().then(() => {
+          Cypress.vueWrapper.vm.blur()
+        })
+
+        getHostElement()
+          .then(() => {
+            expect(fn).to.be.calledWith()
+          })
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): focus', () => {
+      it('should focus the component', () => {
+        mountQField({
+          slots: {
+            control: 'text'
+          }
+        })
+
+        getHostElement()
+          .get('.q-field--focused')
+          .should('not.exist')
+
+        getHostElement()
+          .then(() => {
+            Cypress.vueWrapper.vm.focus()
+          })
+        getHostElement()
+          .get('.q-field--focused')
+          .should('exist')
+      })
+    })
+
+    describe('(method): blur', () => {
+      it('should blur the component', () => {
+        mountQField({
+          slots: {
+            control: 'text'
+          }
+        })
+
+        getHostElement().click()
+
+        getHostElement()
+          .get('.q-field--focused')
+          .should('exist')
+
+        getHostElement()
+          .then(() => {
+            Cypress.vueWrapper.vm.blur()
+          })
+
+        cy.get('.q-field--focused').should('not.exist')
+      })
+    })
+  })
+})