quasar 2.15.3 → 2.16.0

package/src/components/dialog/QDialog.test.js

@@ -1,3 +1,8 @@
+/**
+ * Ignored specs:
+ * [(prop)backdrop-filter]
+ */
+
 import { mount, flushPromises } from '@vue/test-utils'
 import {
   describe, test, expect, vi,
@@ -49,10 +54,6 @@ function createFocusEl () {
 describe('[QDialog API]', () => {
   describe('[Props]', () => {
     describe('[(prop)transition-show]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.transitionShow).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -72,10 +73,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)transition-hide]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.transitionHide).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -105,10 +102,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)transition-duration]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.transitionDuration).toBeDefined()
-      })
-
       test.each([
         [ 'String', '1000' ],
         [ 'Number', 1000 ]
@@ -134,10 +127,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)model-value]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.modelValue).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -162,10 +151,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)persistent]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.persistent).toBeDefined()
-      })
-
       test.each([
         [ 'Backdrop click', triggerBackdropClick ],
         [ 'ESC key', triggerEscKey ]
@@ -208,10 +193,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)no-esc-dismiss]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.noEscDismiss).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -251,10 +232,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)no-backdrop-dismiss]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.noBackdropDismiss).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -294,10 +271,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)no-route-dismiss]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.noRouteDismiss).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const router = await getRouter([ '/home', '/account' ])
 
@@ -338,10 +311,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)auto-close]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.autoClose).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(DialogWrapper, {
           props: {
@@ -387,10 +356,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)seamless]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.seamless).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -419,47 +384,41 @@ describe('[QDialog API]', () => {
       })
     })
 
-    describe('[(prop)backdrop-filter]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.backdropFilter).toBeDefined()
-      })
-
-      // Commented because jsdom doesn't understand backdrop-filter
-
-      // test('type String has effect', async () => {
-      //   const propVal = 'blur(4px)'
-      //   wrapper = mount(QDialog, {
-      //     props: {
-      //       modelValue: true,
-      //       backdropFilter: propVal
-      //     }
-      //   })
-
-      //   await flushPromises()
-      //   await vi.runAllTimers()
-
-      //   expect(
-      //     wrapper.findComponent({ name: 'QPortal' })
-      //       .get('.q-dialog__backdrop')
-      //       .$style('backdrop-filter')
-      //   ).toBe(propVal)
-
-      //   await wrapper.setProps({ backdropFilter: void 0 })
-      //   await flushPromises()
-
-      //   expect(
-      //     wrapper.findComponent({ name: 'QPortal' })
-      //       .get('.q-dialog__backdrop')
-      //       .$style('backdrop-filter')
-      //   ).toBeUndefined()
-      // })
-    })
+    /**
+     * Commented because jsdom doesn't understand backdrop-filter
+     *
+        describe('[(prop)backdrop-filter]', () => {
+          test('type String has effect', async () => {
+            const propVal = 'blur(4px)'
+            wrapper = mount(QDialog, {
+              props: {
+                modelValue: true,
+                backdropFilter: propVal
+              }
+            })
+
+            await flushPromises()
+            await vi.runAllTimers()
+
+            expect(
+              wrapper.findComponent({ name: 'QPortal' })
+                .get('.q-dialog__backdrop')
+                .$style('backdrop-filter')
+            ).toBe(propVal)
+
+            await wrapper.setProps({ backdropFilter: void 0 })
+            await flushPromises()
+
+            expect(
+              wrapper.findComponent({ name: 'QPortal' })
+                .get('.q-dialog__backdrop')
+                .$style('backdrop-filter')
+            ).toBeUndefined()
+          })
+        })
+    */
 
     describe('[(prop)maximized]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.maximized).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -489,10 +448,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)full-width]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.fullWidth).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -522,10 +477,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)full-height]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.fullHeight).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -555,10 +506,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)position]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.position).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -585,10 +532,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)square]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.square).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(DialogWrapper, {
           props: {
@@ -620,10 +563,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)no-refocus]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.noRefocus).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const el = createFocusEl()
 
@@ -678,10 +617,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)no-focus]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.noFocus).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const el = createFocusEl()
 
@@ -730,10 +665,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)no-shake]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.noShake).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -770,10 +701,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(prop)allow-focus-outside]', () => {
-      test('is defined correctly', () => {
-        expect(QDialog.props.allowFocusOutside).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const el = createFocusEl()
 
@@ -840,13 +767,6 @@ describe('[QDialog API]', () => {
 
   describe('[Events]', () => {
     describe('[(event)update:model-value]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QDialog.emits?.includes('update:modelValue')
-          ^ (QDialog.props?.[ 'onUpdate:modelValue' ] !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -876,13 +796,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(event)show]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QDialog.emits?.includes('show')
-          ^ (QDialog.props?.onShow !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         wrapper = mount(QDialog)
         const event = new MouseEvent('click')
@@ -906,13 +819,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(event)before-show]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QDialog.emits?.includes('beforeShow')
-          ^ (QDialog.props?.onBeforeShow !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         wrapper = mount(QDialog)
         const event = new MouseEvent('click')
@@ -936,13 +842,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(event)hide]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QDialog.emits?.includes('hide')
-          ^ (QDialog.props?.onHide !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -973,13 +872,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(event)before-hide]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QDialog.emits?.includes('beforeHide')
-          ^ (QDialog.props?.onBeforeHide !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -1010,13 +902,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(event)shake]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QDialog.emits?.includes('shake')
-          ^ (QDialog.props?.onShake !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         wrapper = mount(QDialog, {
           props: {
@@ -1045,13 +930,6 @@ describe('[QDialog API]', () => {
     })
 
     describe('[(event)escape-key]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QDialog.emits?.includes('escapeKey')
-          ^ (QDialog.props?.onEscapeKey !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting', async () => {
         wrapper = mount(QDialog, {
           props: {

package/src/components/drawer/QDrawer.json

@@ -36,7 +36,7 @@
     "mini-width": {
       "type": "Number",
       "desc": "Width of drawer (in pixels) when in mini mode",
-      "default": "60",
+      "default": "57",
       "category": "style"
     },
 
@@ -50,7 +50,7 @@
       "type": "Boolean",
       "desc": "Disables animation of the drawer when toggling mini mode",
       "category": "behavior",
-      "addedIn": "v2.12.0"
+      "addedIn": "v2.12"
     },
 
     "dark": {

package/src/components/editor/QEditor.js

@@ -39,13 +39,8 @@ export default createComponent({
     toolbar: {
       type: Array,
       validator: v => v.length === 0 || v.every(group => group.length),
-      default () {
-        return [
-          [ 'left', 'center', 'right', 'justify' ],
-          [ 'bold', 'italic', 'underline', 'strike' ],
-          [ 'undo', 'redo' ]
-        ]
-      }
+      // long line on purpose for API validation purposes:
+      default: () => [ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ] ]
     },
     toolbarColor: String,
     toolbarBg: String,
@@ -75,7 +70,7 @@ export default createComponent({
   emits: [
     ...useFullscreenEmits,
     'update:modelValue',
-    'keydown', 'click', 'mouseup', 'keyup', 'touchend',
+    'keydown', 'click',
     'focus', 'blur',
     'dropdownShow',
     'dropdownHide',

package/src/components/editor/QEditor.json

@@ -161,7 +161,7 @@
     "toolbar": {
       "type": "Array",
       "desc": "An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar",
-      "default": "[ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ]",
+      "default": "[ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ] ]",
       "examples": [ "[ 'left', 'center', 'right', 'justify' ]" ],
       "category": "toolbar"
     },
@@ -190,6 +190,7 @@
       "type": "String",
       "desc": "Toolbar background color (from Quasar Palette)",
       "default": "'grey-3'",
+      "__runtimeDefault": true,
       "examples": [ "'secondary'", "'blue-3'" ],
       "category": "toolbar"
     },
@@ -216,6 +217,7 @@
       "type": "String",
       "desc": "Paragraph tag to be used",
       "values": [ "'div'", "'p'" ],
+      "default": "'div'",
       "category": "behavior"
     },
 
@@ -305,7 +307,12 @@
     "link-hide": {
       "desc": "Emitted when the toolbar for editing a link is hidden",
       "addedIn": "v2.11.9"
-    }
+    },
+
+    "keydown": { "internal": true },
+    "click": { "internal": true },
+    "blur": { "internal": true },
+    "focus": { "internal": true }
   },
 
   "methods": {

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

@@ -42,7 +42,7 @@ export default createComponent({
     expandIcon: String,
     expandedIcon: String,
     expandIconClass: [ Array, String, Object ],
-    duration: Number,
+    duration: {},
 
     headerInsetLevel: Number,
     contentInsetLevel: Number,

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

@@ -6,12 +6,6 @@
   },
 
   "props": {
-    "model-value": {
-      "extends": "model-value",
-      "desc": "Model of the component defining 'open' state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "required": false
-    },
-
     "icon": {
       "extends": "icon"
     },
@@ -81,6 +75,7 @@
       "type": "Number",
       "desc": "Animation duration (in milliseconds)",
       "default": "300",
+      "passthrough": "child",
       "category": "behavior"
     },
 
@@ -243,6 +238,10 @@
 
     "after-hide": {
       "extends": "after-hide"
+    },
+
+    "click": {
+      "internal": true
     }
   }
 }

package/src/components/fab/QFab.js

@@ -26,6 +26,7 @@ export default createComponent({
 
     hideIcon: Boolean,
     hideLabel: {
+      ...useFabProps.hideLabel,
       default: null
     },
 

package/src/components/fab/QFab.json

@@ -3,10 +3,7 @@
 
   "props": {
     "model-value": {
-      "extends": "model-value",
-      "desc": "Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to 'update:modelValue' event",
-      "category": "model",
-      "required": false
+      "desc": "Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to 'update:modelValue' event"
     },
 
     "icon": {
@@ -17,6 +14,10 @@
       "extends": "icon"
     },
 
+    "hide-label": {
+      "default": "null"
+    },
+
     "hide-icon": {
       "type": "Boolean",
       "desc": "Hide the icon (don't use any)",

package/src/components/fab/QFabAction.json

@@ -3,7 +3,8 @@
 
   "props": {
     "icon": {
-      "extends": "icon"
+      "extends": "icon",
+      "default": "''"
     },
 
     "anchor": {

package/src/components/fab/use-fab.json

@@ -67,6 +67,7 @@
       "type": [ "String", "Number" ],
       "desc": "The label that will be shown when Fab is extended",
       "examples": [ "'Button Label'" ],
+      "default": "''",
       "category": "content"
     },
 
@@ -74,12 +75,12 @@
       "type": "String",
       "desc": "Position of the label around the icon",
       "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
+      "default": "'right'",
       "category": "style|content"
     },
 
     "hide-label": {
       "type": [ "Boolean", "null" ],
-      "default": "null",
       "desc": "Hide the label; Useful for animation purposes where you toggle the visibility of the label",
       "category": "style|content"
     },

package/src/components/field/QField.json

@@ -12,12 +12,6 @@
       "category": "model"
     },
 
-    "max-values": {
-      "type": [ "Number", "String" ],
-      "desc": "Used internally by QSelect",
-      "internal": true
-    },
-
     "tag": {
       "extends": "tag",
       "default": "'label'",
@@ -79,40 +73,7 @@
 
   "events": {
     "update:model-value": {
-      "extends": "update:model-value",
       "desc": "Emitted when the model changes, only when used with 'clearable' or the 'control' scoped slot."
-    },
-
-    "focus": {
-      "desc": "Emitted when component gets focused",
-      "params": {
-        "evt": {
-          "extends": "evt"
-        }
-      }
-    },
-
-    "blur": {
-      "desc": "Emitted when component loses focus",
-      "params": {
-        "evt": {
-          "extends": "evt"
-        }
-      }
-    }
-  },
-
-  "methods": {
-    "focus": {
-      "desc": "Focus field",
-      "params": null,
-      "returns": null
-    },
-
-    "blur": {
-      "desc": "Blur field (lose focus)",
-      "params": null,
-      "returns": null
     }
   }
 }

package/src/components/file/QFile.js

@@ -2,7 +2,7 @@ import { h, ref, computed, getCurrentInstance } from 'vue'
 
 import QChip from '../chip/QChip.js'
 
-import useField, { useFieldState, useFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private.use-field/use-field.js'
+import useField, { useFieldState, useNonInputFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private.use-field/use-field.js'
 import { useFormProps, useFormInputNameAttr } from '../../composables/use-form/private.use-form.js'
 import useFile, { useFileProps, useFileEmits } from '../../composables/private.use-file/use-file.js'
 import useFileFormDomProps from '../../composables/private.use-file/use-file-dom-props.js'
@@ -18,7 +18,7 @@ export default createComponent({
   inheritAttrs: false,
 
   props: {
-    ...useFieldProps,
+    ...useNonInputFieldProps,
     ...useFormProps,
     ...useFileProps,
 

package/src/components/file/QFile.json

@@ -68,7 +68,8 @@
     },
 
     "tabindex": {
-      "extends": "tabindex"
+      "extends": "tabindex",
+      "default": "0"
     },
 
     "input-class": {
@@ -137,12 +138,6 @@
     }
   },
 
-  "events": {
-    "update:model-value": {
-      "extends": "update:model-value"
-    }
-  },
-
   "methods": {
     "removeAtIndex": {
       "desc": "Remove file located at specific index in the model",

package/src/components/footer/QFooter.json

@@ -52,6 +52,8 @@
           "desc": "New 'reveal' state"
         }
       }
-    }
+    },
+
+    "focusin": { "internal": true }
   }
 }

package/src/components/form/QForm.js

@@ -36,7 +36,7 @@ export default createComponent({
       const index = ++validateIndex
 
       const emitEvent = (res, ref) => {
-        emit('validation' + (res === true ? 'Success' : 'Error'), ref)
+        emit(`validation${ res === true ? 'Success' : 'Error' }`, ref)
       }
 
       const validateComponent = comp => {