quasar 2.14.6 → 2.15.0

package/lang/index.json

@@ -1 +1 @@
-[{"isoName":"ar-TN","nativeName":"العربية (تونس)"},{"isoName":"ar","nativeName":"العربية"},{"isoName":"az-Latn","nativeName":"Azerbaijani (latin)"},{"isoName":"bg","nativeName":"български език"},{"isoName":"bn","nativeName":"বাংলা"},{"isoName":"ca","nativeName":"Català"},{"isoName":"cs","nativeName":"Čeština"},{"isoName":"da","nativeName":"Dansk"},{"isoName":"de-CH","nativeName":"Deutsch (CH)"},{"isoName":"de-DE","nativeName":"Deutsch (DE)"},{"isoName":"de","nativeName":"Deutsch"},{"isoName":"el","nativeName":"ελληνικά"},{"isoName":"en-GB","nativeName":"English (UK)"},{"isoName":"en-US","nativeName":"English (US)"},{"isoName":"eo","nativeName":"Esperanto"},{"isoName":"es","nativeName":"Español"},{"isoName":"et","nativeName":"Eesti"},{"isoName":"eu","nativeName":"Euskara"},{"isoName":"fa-IR","nativeName":"فارسی"},{"isoName":"fa","nativeName":"فارسی"},{"isoName":"fi","nativeName":"Suomi"},{"isoName":"fr","nativeName":"Français"},{"isoName":"gn","nativeName":"Avañe'ẽ"},{"isoName":"he","nativeName":"עברית"},{"isoName":"hi","nativeName":"अमेरिकी अंग्रेज़ी"},{"isoName":"hr","nativeName":"Hrvatski jezik"},{"isoName":"hu","nativeName":"Magyar"},{"isoName":"id","nativeName":"Bahasa Indonesia"},{"isoName":"is","nativeName":"Íslenska"},{"isoName":"it","nativeName":"Italiano"},{"isoName":"ja","nativeName":"日本語 (にほんご)"},{"isoName":"kk","nativeName":"Қазақша"},{"isoName":"km","nativeName":"ខ្មែរ"},{"isoName":"ko-KR","nativeName":"한국어"},{"isoName":"kur-CKB","nativeName":"کوردی سۆرانی"},{"isoName":"lt","nativeName":"Lithuanian"},{"isoName":"lu","nativeName":"Kiluba"},{"isoName":"lv","nativeName":"Latviešu valoda"},{"isoName":"mk","nativeName":"Македонски"},{"isoName":"ml","nativeName":"മലയാളം"},{"isoName":"mm","nativeName":"မြန်မာ(ဗမာ)"},{"isoName":"ms","nativeName":"Bahasa Melayu"},{"isoName":"my","nativeName":"Malaysia"},{"isoName":"nb-NO","nativeName":"Norsk"},{"isoName":"nl","nativeName":"Nederlands"},{"isoName":"pl","nativeName":"Polski"},{"isoName":"pt-BR","nativeName":"Português (BR)"},{"isoName":"pt","nativeName":"Português"},{"isoName":"ro","nativeName":"Română"},{"isoName":"ru","nativeName":"русский"},{"isoName":"sk","nativeName":"Slovenčina"},{"isoName":"sl","nativeName":"Slovenski Jezik"},{"isoName":"sm","nativeName":"Fa'asāmoa"},{"isoName":"sr-CYR","nativeName":"српски језик"},{"isoName":"sr","nativeName":"srpski jezik"},{"isoName":"sv","nativeName":"Svenska"},{"isoName":"ta","nativeName":"தமிழ்"},{"isoName":"th","nativeName":"ไทย"},{"isoName":"tl","nativeName":"Tagalog"},{"isoName":"tr","nativeName":"Türkçe"},{"isoName":"ug","nativeName":"ئۇيغۇرچە"},{"isoName":"uk","nativeName":"Українська"},{"isoName":"uz-Cyrl","nativeName":"Ўзбекча (Кирил)"},{"isoName":"uz-Latn","nativeName":"O'zbekcha (Lotin)"},{"isoName":"vi","nativeName":"Tiếng Việt"},{"isoName":"zh-CN","nativeName":"中文(简体)"},{"isoName":"zh-TW","nativeName":"中文（繁體）"}]
+[{"isoName":"ar-TN","nativeName":"العربية (تونس)"},{"isoName":"ar","nativeName":"العربية"},{"isoName":"az-Latn","nativeName":"Azerbaijani (latin)"},{"isoName":"bg","nativeName":"български език"},{"isoName":"bn","nativeName":"বাংলা"},{"isoName":"ca","nativeName":"Català"},{"isoName":"cs","nativeName":"Čeština"},{"isoName":"da","nativeName":"Dansk"},{"isoName":"de-CH","nativeName":"Deutsch (CH)"},{"isoName":"de-DE","nativeName":"Deutsch (DE)"},{"isoName":"de","nativeName":"Deutsch"},{"isoName":"el","nativeName":"ελληνικά"},{"isoName":"en-GB","nativeName":"English (UK)"},{"isoName":"en-US","nativeName":"English (US)"},{"isoName":"eo","nativeName":"Esperanto"},{"isoName":"es","nativeName":"Español"},{"isoName":"et","nativeName":"Eesti"},{"isoName":"eu","nativeName":"Euskara"},{"isoName":"fa-IR","nativeName":"فارسی"},{"isoName":"fa","nativeName":"فارسی"},{"isoName":"fi","nativeName":"Suomi"},{"isoName":"fr","nativeName":"Français"},{"isoName":"gn","nativeName":"Avañe'ẽ"},{"isoName":"he","nativeName":"עברית"},{"isoName":"hi","nativeName":"अमेरिकी अंग्रेज़ी"},{"isoName":"hr","nativeName":"Hrvatski jezik"},{"isoName":"hu","nativeName":"Magyar"},{"isoName":"id","nativeName":"Bahasa Indonesia"},{"isoName":"is","nativeName":"Íslenska"},{"isoName":"it","nativeName":"Italiano"},{"isoName":"ja","nativeName":"日本語 (にほんご)"},{"isoName":"kk","nativeName":"Қазақша"},{"isoName":"km","nativeName":"ខ្មែរ"},{"isoName":"ko-KR","nativeName":"한국어"},{"isoName":"kur-CKB","nativeName":"کوردی سۆرانی"},{"isoName":"lt","nativeName":"Lithuanian"},{"isoName":"lu","nativeName":"Kiluba"},{"isoName":"lv","nativeName":"Latviešu valoda"},{"isoName":"mk","nativeName":"Македонски"},{"isoName":"ml","nativeName":"മലയാളം"},{"isoName":"mm","nativeName":"မြန်မာ(ဗမာ)"},{"isoName":"ms-MY","nativeName":"Malaysia"},{"isoName":"ms","nativeName":"Bahasa Melayu"},{"isoName":"my","nativeName":"Malaysia"},{"isoName":"nb-NO","nativeName":"Norsk"},{"isoName":"nl","nativeName":"Nederlands"},{"isoName":"pl","nativeName":"Polski"},{"isoName":"pt-BR","nativeName":"Português (BR)"},{"isoName":"pt","nativeName":"Português"},{"isoName":"ro","nativeName":"Română"},{"isoName":"ru","nativeName":"русский"},{"isoName":"sk","nativeName":"Slovenčina"},{"isoName":"sl","nativeName":"Slovenski Jezik"},{"isoName":"sm","nativeName":"Fa'asāmoa"},{"isoName":"sr-CYR","nativeName":"српски језик"},{"isoName":"sr","nativeName":"srpski jezik"},{"isoName":"sv","nativeName":"Svenska"},{"isoName":"ta","nativeName":"தமிழ்"},{"isoName":"th","nativeName":"ไทย"},{"isoName":"tl","nativeName":"Tagalog"},{"isoName":"tr","nativeName":"Türkçe"},{"isoName":"ug","nativeName":"ئۇيغۇرچە"},{"isoName":"uk","nativeName":"Українська"},{"isoName":"uz-Cyrl","nativeName":"Ўзбекча (Кирил)"},{"isoName":"uz-Latn","nativeName":"O'zbekcha (Lotin)"},{"isoName":"vi","nativeName":"Tiếng Việt"},{"isoName":"zh-CN","nativeName":"中文(简体)"},{"isoName":"zh-TW","nativeName":"中文（繁體）"}]

package/lang/ms-MY.js

@@ -0,0 +1,101 @@
+/**
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its .mjs counterpart (same filename but with .mjs extension).
+ * Edit that file instead (ms-MY.mjs).
+ */
+module.exports = {
+  isoName: 'ms-MY',
+  nativeName: 'Malaysia',
+  label: {
+    clear: 'Semula',
+    ok: 'OK',
+    cancel: 'Batal',
+    close: 'Tutup',
+    set: 'Set',
+    select: 'Pilih',
+    reset: 'Reset',
+    remove: 'Keluarkan',
+    update: 'Kemaskini',
+    create: 'Cipta',
+    search: 'Cari',
+    filter: 'Saring',
+    refresh: 'Muat semula',
+    expand: label => (label ? `Kembangkan "${ label }"` : 'Kembangkan'),
+    collapse: label => (label ? `Runtuhkan "${ label }"` : 'Runtuh')
+  },
+  date: {
+    days: 'Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu'.split('_'),
+    daysShort: 'Aha_Isn_Sel_Rab_Kha_Jum_Sab'.split('_'),
+    months: 'Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember'.split('_'),
+    monthsShort: 'Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogo_Sep_Okt_Nov_Dis'.split('_'),
+    headerTitle: date => new Intl.DateTimeFormat('my', {
+      weekday: 'short', month: 'short', day: 'numeric'
+    }).format(date),
+    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'hari'
+  },
+  table: {
+    noData: 'Tiada data tersedia',
+    noResults: 'Tiada rekod yang sepadan ditemui',
+    loading: 'Dalam proses...',
+    selectedRecords: rows => (
+      rows > 1
+        ? rows + ' rekod terpilih.'
+        : (rows === 0 ? 'tiada' : '1') + ' rekod terpilih.'
+    ),
+    recordsPerPage: 'Rekod setiap halaman:',
+    allRows: 'Semua',
+    pagination: (start, end, total) => start + '-' + end + ' / ' + total,
+    columns: 'Senaraikan'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'Tebal',
+    italic: 'Italik',
+    strikethrough: 'Garis Tengah',
+    underline: 'Garis Bawah',
+    unorderedList: 'Senarai Tidak Teratur',
+    orderedList: 'Senarai Teratur',
+    subscript: 'Subskrip',
+    superscript: 'Superskrip',
+    hyperlink: 'Hyperlink',
+    toggleFullscreen: 'Togol Skrin Penuh',
+    quote: 'Petikan',
+    left: 'Jajar ke Kiri',
+    center: 'Penjajaran Tengah',
+    right: 'Sejajar ke kanan',
+    justify: 'Wajar',
+    print: 'Cetak',
+    outdent: 'Mengurangkan Lekukan',
+    indent: 'Tambah Indentasi',
+    removeFormat: 'Buang Format',
+    formatting: 'Format',
+    fontSize: 'Saiz Huruf',
+    align: 'Selaraskan',
+    hr: 'Masukkan Garisan Mendatar',
+    undo: 'Undo',
+    redo: 'Redo',
+    heading1: 'Heading 1',
+    heading2: 'Heading 2',
+    heading3: 'Heading 3',
+    heading4: 'Heading 4',
+    heading5: 'Heading 5',
+    heading6: 'Heading 6',
+    paragraph: 'Perenggan',
+    code: 'Kod',
+    size1: 'Paling Kecil',
+    size2: 'Agak Kecil',
+    size3: 'Normal',
+    size4: 'Sederhana',
+    size5: 'Besar',
+    size6: 'Paling Besar',
+    size7: 'Maksimum',
+    defaultFont: 'Tulisan Asal',
+    viewSource: 'Lihat Sumber'
+  },
+  tree: {
+    noNodes: 'Tiada nod tersedia',
+    noResults: 'Tiada nod yang sepadan dijumpai'
+  }
+}

package/lang/ms-MY.mjs

@@ -0,0 +1,96 @@
+export default {
+  isoName: 'ms-MY',
+  nativeName: 'Malaysia',
+  label: {
+    clear: 'Semula',
+    ok: 'OK',
+    cancel: 'Batal',
+    close: 'Tutup',
+    set: 'Set',
+    select: 'Pilih',
+    reset: 'Reset',
+    remove: 'Keluarkan',
+    update: 'Kemaskini',
+    create: 'Cipta',
+    search: 'Cari',
+    filter: 'Saring',
+    refresh: 'Muat semula',
+    expand: label => (label ? `Kembangkan "${ label }"` : 'Kembangkan'),
+    collapse: label => (label ? `Runtuhkan "${ label }"` : 'Runtuh')
+  },
+  date: {
+    days: 'Ahad_Isnin_Selasa_Rabu_Khamis_Jumaat_Sabtu'.split('_'),
+    daysShort: 'Aha_Isn_Sel_Rab_Kha_Jum_Sab'.split('_'),
+    months: 'Januari_Februari_Mac_April_Mei_Jun_Julai_Ogos_September_Oktober_November_Disember'.split('_'),
+    monthsShort: 'Jan_Feb_Mac_Apr_Mei_Jun_Jul_Ogo_Sep_Okt_Nov_Dis'.split('_'),
+    headerTitle: date => new Intl.DateTimeFormat('my', {
+      weekday: 'short', month: 'short', day: 'numeric'
+    }).format(date),
+    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
+    format24h: false,
+    pluralDay: 'hari'
+  },
+  table: {
+    noData: 'Tiada data tersedia',
+    noResults: 'Tiada rekod yang sepadan ditemui',
+    loading: 'Dalam proses...',
+    selectedRecords: rows => (
+      rows > 1
+        ? rows + ' rekod terpilih.'
+        : (rows === 0 ? 'tiada' : '1') + ' rekod terpilih.'
+    ),
+    recordsPerPage: 'Rekod setiap halaman:',
+    allRows: 'Semua',
+    pagination: (start, end, total) => start + '-' + end + ' / ' + total,
+    columns: 'Senaraikan'
+  },
+  editor: {
+    url: 'URL',
+    bold: 'Tebal',
+    italic: 'Italik',
+    strikethrough: 'Garis Tengah',
+    underline: 'Garis Bawah',
+    unorderedList: 'Senarai Tidak Teratur',
+    orderedList: 'Senarai Teratur',
+    subscript: 'Subskrip',
+    superscript: 'Superskrip',
+    hyperlink: 'Hyperlink',
+    toggleFullscreen: 'Togol Skrin Penuh',
+    quote: 'Petikan',
+    left: 'Jajar ke Kiri',
+    center: 'Penjajaran Tengah',
+    right: 'Sejajar ke kanan',
+    justify: 'Wajar',
+    print: 'Cetak',
+    outdent: 'Mengurangkan Lekukan',
+    indent: 'Tambah Indentasi',
+    removeFormat: 'Buang Format',
+    formatting: 'Format',
+    fontSize: 'Saiz Huruf',
+    align: 'Selaraskan',
+    hr: 'Masukkan Garisan Mendatar',
+    undo: 'Undo',
+    redo: 'Redo',
+    heading1: 'Heading 1',
+    heading2: 'Heading 2',
+    heading3: 'Heading 3',
+    heading4: 'Heading 4',
+    heading5: 'Heading 5',
+    heading6: 'Heading 6',
+    paragraph: 'Perenggan',
+    code: 'Kod',
+    size1: 'Paling Kecil',
+    size2: 'Agak Kecil',
+    size3: 'Normal',
+    size4: 'Sederhana',
+    size5: 'Besar',
+    size6: 'Paling Besar',
+    size7: 'Maksimum',
+    defaultFont: 'Tulisan Asal',
+    viewSource: 'Lihat Sumber'
+  },
+  tree: {
+    noNodes: 'Tiada nod tersedia',
+    noResults: 'Tiada nod yang sepadan dijumpai'
+  }
+}

package/lang/tl.js

@@ -95,4 +95,4 @@ module.exports = {
     noNodes: 'Walang available na node',
     noResults: 'Walang nakitang tumutugmang node'
   }
-}
+}

package/lang/tl.mjs

@@ -90,4 +90,4 @@ export default {
     noNodes: 'Walang available na node',
     noResults: 'Walang nakitang tumutugmang node'
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.14.6",
+  "version": "2.15.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",
@@ -27,8 +27,8 @@
     "dev:umd": "node build/script.test-umd.js",
     "dev:quploader": "cd dev/upload-server && yarn && cd ../.. && node dev/upload-server/server.js",
     "build": "node build/script.build.js",
-    "lint": "eslint --ext .js,.vue src dev --report-unused-disable-directives",
-    "lint-fix": "eslint --ext .js,.vue src dev --fix --report-unused-disable-directives",
+    "lint": "eslint --ext .js,.cjs,.mjs,.vue src dev --report-unused-disable-directives",
+    "lint-fix": "eslint --ext .js,.cjs,.mjs,.vue src dev --fix --report-unused-disable-directives",
     "format:types": "prettier --write \"types/**/*.{d.ts,ts,json}\"",
     "test:create": "node ./test/cypress/helpers/create-spec.js -c",
     "test:build": "yarn build",
@@ -73,13 +73,12 @@
   "devDependencies": {
     "@quasar/app-vite": "^2.0.0-beta.1",
     "@quasar/extras": "^1.16.4",
-    "@quasar/quasar-app-extension-testing-e2e-cypress": "^5.2.1",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^6.0.0",
     "autoprefixer": "^10.4.17",
     "cli-highlight": "^2.1.11",
     "cross-env": "^7.0.3",
     "cssnano": "^6.0.5",
     "cypress": "^13.6.6",
-    "cypress-json-results": "^1.2.1",
     "diff": "^5.2.0",
     "esbuild": "^0.20.1",
     "eslint": "^8.57.0",
@@ -101,6 +100,7 @@
     "recast": "^0.23.4",
     "table": "^6.8.1",
     "typescript": "^5.3.3",
+    "vite-plugin-checker": "^0.6.4",
     "vue": "^3.4.20",
     "vue-router": "^4.2.1",
     "yargs": "^17.7.2"

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -6,7 +6,7 @@ import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
 import { getBtnDesignAttr, useBtnProps } from '../btn/use-btn.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import { useTransitionProps } from '../../composables/private/use-transition.js'
 
 import { createComponent } from '../../utils/private/create.js'

package/src/components/color/QColor.js

@@ -11,7 +11,7 @@ import QTabPanels from '../tab-panels/QTabPanels.js'
 import QTabPanel from '../tab-panels/QTabPanel.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useCache from '../../composables/private/use-cache.js'
+import useRenderCache from '../../composables/use-render-cache.js'
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
 import { createComponent } from '../../utils/private/create.js'
@@ -80,7 +80,7 @@ export default createComponent({
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
-    const { getCache } = useCache()
+    const { getCache } = useRenderCache()
 
     const spectrumRef = ref(null)
     const errorIconRef = ref(null)
@@ -290,7 +290,7 @@ export default createComponent({
       updateModel(rgb, change)
     }
 
-    function onHueChange (val, change) {
+    function onHue (val, change) {
       const h = Math.round(val)
       const rgb = hsvToRgb({
         h,
@@ -303,6 +303,10 @@ export default createComponent({
       updateModel(rgb, change)
     }
 
+    function onHueChange (val) {
+      onHueChange(val, true)
+    }
+
     function onNumericChange (value, formatModel, max, evt, change) {
       evt !== void 0 && stop(evt)
 
@@ -494,6 +498,10 @@ export default createComponent({
       }
     }
 
+    function setTopView (val) {
+      topView.value = val
+    }
+
     function getHeader () {
       const child = []
 
@@ -503,9 +511,7 @@ export default createComponent({
           modelValue: topView.value,
           dense: true,
           align: 'justify',
-          ...getCache('topVTab', {
-            'onUpdate:modelValue': val => { topView.value = val }
-          })
+          'onUpdate:modelValue': setTopView
         }, () => [
           h(QTab, {
             label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
@@ -586,6 +592,10 @@ export default createComponent({
       ])
     }
 
+    function setView (val) {
+      view.value = val
+    }
+
     function getFooter () {
       return h('div', {
         class: 'q-color-picker__footer relative-position overflow-hidden'
@@ -595,9 +605,7 @@ export default createComponent({
           modelValue: view.value,
           dense: true,
           align: 'justify',
-          ...getCache('ftIn', {
-            'onUpdate:modelValue': val => { view.value = val }
-          })
+          'onUpdate:modelValue': setView
         }, () => [
           h(QTab, {
             icon: $q.iconSet.colorPicker.spectrum,
@@ -660,10 +668,8 @@ export default createComponent({
           selectionColor: 'transparent',
           readonly: editable.value !== true,
           thumbPath,
-          'onUpdate:modelValue': onHueChange,
-          ...getCache('lazyhue', {
-            onChange: val => onHueChange(val, true)
-          })
+          'onUpdate:modelValue': onHue,
+          onChange: onHueChange
         })
       ]
 

package/src/components/color/QColor.sass

@@ -98,7 +98,7 @@
     transform: translate(-5px, -5px)
 
   &__hue .q-slider__track
-    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important // @stylint ignore
+    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important
     opacity: 1
 
   &__alpha

package/src/components/date/QDate.js

@@ -3,7 +3,7 @@ import { h, ref, computed, watch, Transition, nextTick, getCurrentInstance } fro
 import QBtn from '../btn/QBtn.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useCache from '../../composables/private/use-cache.js'
+import useRenderCache from '../../composables/use-render-cache.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
 import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from './use-datetime.js'
 
@@ -90,7 +90,7 @@ export default createComponent({
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
-    const { getCache } = useCache()
+    const { getCache } = useRenderCache()
     const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(props, $q)
 
     let lastEmitValue

package/src/components/dialog/QDialog.js

@@ -1,8 +1,8 @@
 import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
 import useHistory from '../../composables/private/use-history.js'
-import useTimeout from '../../composables/private/use-timeout.js'
-import useTick from '../../composables/private/use-tick.js'
+import useTimeout from '../../composables/use-timeout.js'
+import useTick from '../../composables/use-tick.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
 import usePortal from '../../composables/private/use-portal.js'
@@ -64,6 +64,8 @@ export default createComponent({
 
     square: Boolean,
 
+    backdropFilter: String,
+
     position: {
       type: String,
       default: 'standard',
@@ -102,6 +104,16 @@ export default createComponent({
       () => defaultTransitions[ props.position ][ 1 ]
     )
 
+    const backdropStyle = computed(() => (
+      transitionStyle.value
+      + (
+        props.backdropFilter !== void 0
+          // Safari requires the -webkit prefix
+          ? `;backdrop-filter:${ props.backdropFilter };-webkit-backdrop-filter:${ props.backdropFilter }`
+          : ''
+      )
+    ))
+
     const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, 'dialog'
     )
@@ -384,7 +396,7 @@ export default createComponent({
           useBackdrop.value === true
             ? h('div', {
               class: 'q-dialog__backdrop fixed-full',
-              style: transitionStyle.value,
+              style: backdropStyle.value,
               'aria-hidden': 'true',
               tabindex: -1,
               onClick: onBackdropClick

package/src/components/dialog/QDialog.json

@@ -42,6 +42,25 @@
       "category": "content"
     },
 
+    "backdrop-filter": {
+      "type": "String",
+      "desc": "Apply a backdrop filter; The value needs to be the same as in the CSS specs for backdrop-filter; The examples are not an exhaustive list",
+      "examples": [
+        "blur(4px)",
+        "blur(4px) saturate(150%)",
+        "brightness(60%)",
+        "invert(70%)",
+        "grayscale(100%)",
+        "contrast(40%)",
+        "hue-rotate(120deg)",
+        "sepia(90%)",
+        "saturate(80%)",
+        "none"
+      ],
+      "category": "style",
+      "addedIn": "v2.15"
+    },
+
     "maximized": {
       "type": "Boolean",
       "desc": "Put Dialog into maximized mode",

package/src/components/drawer/QDrawer.js

@@ -3,7 +3,7 @@ import { h, withDirectives, ref, computed, watch, onMounted, onBeforeUnmount, ne
 import useHistory from '../../composables/private/use-history.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 import usePreventScroll from '../../composables/private/use-prevent-scroll.js'
-import useTimeout from '../../composables/private/use-timeout.js'
+import useTimeout from '../../composables/use-timeout.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import TouchPan from '../../directives/TouchPan.js'

package/src/components/editor/QEditor.js

@@ -5,7 +5,7 @@ import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private/use-fullscreen.js'
-import useSplitAttrs from '../../composables/private/use-split-attrs.js'
+import useSplitAttrs from '../../composables/use-split-attrs.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
@@ -85,13 +85,13 @@ export default createComponent({
     'linkHide'
   ],
 
-  setup (props, { slots, emit, attrs }) {
-    const { proxy, vnode } = getCurrentInstance()
+  setup (props, { slots, emit }) {
+    const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
     const { inFullscreen, toggleFullscreen } = useFullscreen()
-    const splitAttrs = useSplitAttrs(attrs, vnode)
+    const splitAttrs = useSplitAttrs()
 
     const rootRef = ref(null)
     const contentRef = ref(null)

package/src/components/expansion-item/QExpansionItem.js

@@ -8,7 +8,7 @@ import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import QSeparator from '../separator/QSeparator.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 

package/src/components/fab/QFab.js

@@ -4,7 +4,7 @@ import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
 
 import useFab, { useFabProps } from './use-fab.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 
 import { createComponent } from '../../utils/private/create.js'

package/src/components/field/QField.sass

@@ -182,7 +182,8 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     .q-field__control > div
       opacity: .6 !important
 
-      &, * // @stylint ignore
+      &,
+      *
         outline: 0 !important
 
   &__label