quasar 2.3.3 → 2.3.4

package/dist/ssr-directives/Morph.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.3.3
+ * Quasar Framework v2.3.4
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/types/index.d.ts

@@ -1440,7 +1440,7 @@ export interface QBtnDropdownProps {
   /**
    * Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
    */
-  modelValue: boolean;
+  modelValue?: boolean;
   /**
    * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
    */
@@ -4775,7 +4775,7 @@ export interface QFileSlots {
     /**
      * Reference to the QFile component
      */
-    ref: LooseDictionary;
+    ref: QFile;
   }) => VNode[];
   /**
    * Override default selection slot; Suggestion: QChip
@@ -4789,7 +4789,7 @@ export interface QFileSlots {
     /**
      * Reference to the QFile component
      */
-    ref: LooseDictionary;
+    ref: QFile;
   }) => VNode[];
 }
 
@@ -4911,7 +4911,7 @@ export interface QFormProps {
    * Emitted after a validation was triggered and at least one of the inner Quasar components models are NOT valid
    * @param ref Vue reference to the first component that triggered the validation error
    */
-  onValidationError?: (ref: LooseDictionary) => void;
+  onValidationError?: (ref: Component) => void;
 }
 
 export interface QFormSlots {
@@ -7493,7 +7493,7 @@ export interface QScrollAreaProps {
     /**
      * Vue reference to the QScrollArea which triggered the event
      */
-    ref: LooseDictionary;
+    ref: QScrollArea;
     /**
      * Vertical scroll position (in px)
      */
@@ -7541,7 +7541,7 @@ export interface QScrollArea extends ComponentPublicInstance<QScrollAreaProps> {
    * Get the scrolling DOM element target
    * @returns DOM element upon which scrolling takes place
    */
-  getScrollTarget: () => LooseDictionary;
+  getScrollTarget: () => Element;
   /**
    * Get the current scroll information
    * @returns Scroll information
@@ -7762,7 +7762,7 @@ export interface QSelectProps {
   /**
    * Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
    */
-  modelValue: number | string | any[] | null | undefined;
+  modelValue: any;
   /**
    * Does field have validation errors?
    */
@@ -8131,9 +8131,9 @@ export interface QSelectProps {
      */
     direction: "increase" | "decrease";
     /**
-     * Vue reference to the QVirtualList which triggered the event
+     * Vue reference to the QSelect
      */
-    ref: LooseDictionary;
+    ref: QSelect;
   }) => void;
   /**
    * When using the 'clearable' property, this event is emitted when the clear icon is clicked
@@ -8195,10 +8195,7 @@ export interface QSelectProps {
    */
   onFilter?: (
     inputValue: string,
-    doneFn: (
-      callbackFn: () => void,
-      afterFn?: (ref: LooseDictionary) => void
-    ) => void,
+    doneFn: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
     abortFn: () => void
   ) => void;
   /**
@@ -12286,7 +12283,7 @@ export interface QTreeSlots {
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
@@ -12320,7 +12317,7 @@ export interface QTreeSlots {
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
@@ -12354,7 +12351,7 @@ export interface QTreeSlots {
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
@@ -12388,7 +12385,7 @@ export interface QTreeSlots {
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
@@ -12849,9 +12846,9 @@ export interface QVirtualScrollProps {
      */
     direction: "increase" | "decrease";
     /**
-     * Vue reference to the QVirtualList which triggered the event
+     * Vue reference to the QVirtualScroll
      */
-    ref: LooseDictionary;
+    ref: QVirtualScroll;
   }) => void;
 }
 
@@ -13144,7 +13141,7 @@ export interface QDialogOptions {
   /**
    * Use custom dialog component; use along with 'componentProps' prop where possible
    */
-  component?: any;
+  component?: Component;
   /**
    * User defined props which will be forwarded to underlying custom component if 'component' prop is used
    */

package/dist/vetur/quasar-attributes.json

@@ -3648,7 +3648,7 @@
     "description": "The number of columns in the table (you need this if you use table-layout: fixed)"
   },
   "q-select/model-value": {
-    "type": "number|string|array|null|undefined",
+    "type": "any",
     "description": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive"
   },
   "q-select/error": {

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -573,7 +573,6 @@
               },
               "description": "Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive\n\nExamples:\nv-model=\"menuState\"",
               "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
-              "required": true,
               "type": "boolean"
             },
             {
@@ -6816,7 +6815,7 @@
               "arguments": [
                 {
                   "name": "ref",
-                  "type": "object",
+                  "type": "Component",
                   "description": "Vue reference to the first component that triggered the validation error",
                   "doc-url": "https://v2.quasar.dev/vue-components/form"
                 }
@@ -11224,7 +11223,7 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "description": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive\n\nExamples:\n:value=\"2\"",
+              "description": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive\n\nExamples:\nv-model=\"rating\"\n:model-value=\"rating\"\n:model-value=\"2\"",
               "doc-url": "https://v2.quasar.dev/vue-components/rating",
               "required": true
             },
@@ -11720,7 +11719,7 @@
               "name": "model-value",
               "value": {
                 "kind": "expression",
-                "type": "number|string|any[]|null|undefined"
+                "type": "any"
               },
               "description": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive\n\nExamples:\nv-model=\"myModel\"",
               "doc-url": "https://v2.quasar.dev/vue-components/select",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "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",

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

@@ -10,6 +10,7 @@
       "extends": "model-value",
       "type": "Boolean",
       "desc": "Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
+      "required": false,
       "examples": [ "v-model=\"menuState\"" ]
     },
 

package/src/components/chip/QChip.json

@@ -55,8 +55,7 @@
       "type": "Boolean",
       "desc": "Model of the component determining if QChip should be rendered or not",
       "required": false,
-      "default": true,
-      "category": "model"
+      "default": true
     },
 
     "selected": {

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

@@ -7,8 +7,9 @@
 
   "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",
-      "category": "model"
+      "required": false
     },
 
     "icon": {

package/src/components/fab/QFab.json

@@ -3,8 +3,10 @@
 
   "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"
+      "category": "model",
+      "required": false
     },
 
     "icon": {

package/src/components/file/QFile.json

@@ -114,9 +114,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     },
@@ -131,9 +131,9 @@
         },
 
         "ref": {
-          "type": "Object",
-          "desc": "Reference to the QFile component",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QFile",
+          "desc": "Reference to the QFile component"
         }
       }
     }

package/src/components/form/QForm.json

@@ -52,9 +52,8 @@
       "desc": "Emitted after a validation was triggered and at least one of the inner Quasar components models are NOT valid",
       "params": {
         "ref": {
-          "type": "Object",
-          "desc": "Vue reference to the first component that triggered the validation error",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "desc": "Vue reference to the first component that triggered the validation error"
         }
       }
     }

package/src/components/icon/QIcon.js

@@ -29,11 +29,11 @@ const matMap = {
 
 const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
 const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
-const mRE = /^M/
+const mRE = /^[Mm] ?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faLaRE = /^[l|f]a[s|r|l|b|d|k]? /
+const faLaRE = /^[lf]a[srlbdk]? /
 
 export default createComponent({
   name: 'QIcon',

package/src/components/linear-progress/QLinearProgress.js

@@ -58,6 +58,7 @@ export default createComponent({
     const sizeStyle = useSize(props, defaultSizes)
 
     const motion = computed(() => props.indeterminate === true || props.query === true)
+    const widthReverse = computed(() => props.reverse !== props.query)
     const style = computed(() => ({
       ...(sizeStyle.value !== null ? sizeStyle.value : {}),
       '--q-linear-progress-speed': `${ props.animationSpeed }ms`
@@ -70,7 +71,7 @@ export default createComponent({
       + (props.rounded === true ? ' rounded-borders' : '')
     )
 
-    const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, props.reverse, proxy.$q))
+    const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q))
     const trackClass = computed(() =>
       'q-linear-progress__track absolute-full'
       + ` q-linear-progress__track--with${ props.instantFeedback === true ? 'out' : '' }-transition`
@@ -78,7 +79,7 @@ export default createComponent({
       + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
     )
 
-    const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, props.reverse, proxy.$q))
+    const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q))
     const modelClass = computed(() =>
       'q-linear-progress__model absolute-full'
       + ` q-linear-progress__model--with${ props.instantFeedback === true ? 'out' : '' }-transition`

package/src/components/popup-proxy/QPopupProxy.json

@@ -7,9 +7,10 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "type": "Boolean",
       "desc": "Defines the state of the component (shown/hidden); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "category": "model"
+      "required": false
     },
 
     "breakpoint": {

package/src/components/rating/QRating.json

@@ -9,7 +9,7 @@
     "model-value": {
       "extends": "model-value",
       "type": "Number",
-      "examples": [ ":value=\"2\"" ]
+      "examples": [ "v-model=\"rating\"", ":model-value=\"rating\"", ":model-value=\"2\"" ]
     },
 
     "max": {

package/src/components/scroll-area/QScrollArea.json

@@ -98,10 +98,10 @@
           "desc": "An object containing scroll information",
           "definition": {
             "ref": {
-              "type": "Object",
+              "type": "Component",
+              "tsType": "QScrollArea",
               "required": true,
-              "desc": "Vue reference to the QScrollArea which triggered the event",
-              "__exemption": [ "examples" ]
+              "desc": "Vue reference to the QScrollArea which triggered the event"
             },
 
             "verticalPosition": {
@@ -163,9 +163,8 @@
     "getScrollTarget": {
       "desc": "Get the scrolling DOM element target",
       "returns": {
-        "type": "Object",
-        "desc": "DOM element upon which scrolling takes place",
-        "__exemption": [ "examples" ]
+        "type": "Element",
+        "desc": "DOM element upon which scrolling takes place"
       }
     },
 

package/src/components/select/QSelect.json

@@ -8,7 +8,7 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "Number", "String", "Array", "null", "undefined" ],
+      "type": "Any",
       "desc": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "examples": [ "v-model=\"myModel\"" ]
     },
@@ -597,10 +597,10 @@
               "desc": "Callback to call at the end after the update has been fully processed by QSelect",
               "params": {
                 "ref": {
-                  "type": "Object",
+                  "type": "Component",
+                  "tsType": "QSelect",
                   "required": true,
-                  "desc": "Vue reference to the QSelect which triggered the filtering",
-                  "__exemption": [ "examples" ]
+                  "desc": "Vue reference to the QSelect which triggered the filtering"
                 }
               },
               "returns": null
@@ -641,6 +641,19 @@
           "__exemption": [ "examples" ]
         }
       }
+    },
+
+    "virtual-scroll": {
+      "params": {
+        "details": {
+          "definition": {
+            "ref": {
+              "tsType": "QSelect",
+              "desc": "Vue reference to the QSelect"
+            }
+          }
+        }
+      }
     }
   },
 

package/src/components/table/QTable.js

@@ -562,7 +562,7 @@ export default createComponent({
         topSelection = slots[ 'top-selection' ],
         hasSelection = hasSelectionMode.value === true
           && topSelection !== void 0
-          && rowsSelectedNumber.vaue > 0,
+          && rowsSelectedNumber.value > 0,
         topClass = 'q-table__top relative-position row items-center'
 
       if (top !== void 0) {

package/src/components/tree/QTree.json

@@ -186,9 +186,9 @@
           "reactive": true
         },
         "tree": {
-          "type": "Object",
-          "desc": "QTree instance",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QTree",
+          "desc": "QTree instance"
         },
         "node": {
           "type": "Object",
@@ -226,9 +226,9 @@
           "reactive": true
         },
         "tree": {
-          "type": "Object",
-          "desc": "QTree instance",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QTree",
+          "desc": "QTree instance"
         },
         "node": {
           "type": "Object",
@@ -266,9 +266,9 @@
           "reactive": true
         },
         "tree": {
-          "type": "Object",
-          "desc": "QTree instance",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QTree",
+          "desc": "QTree instance"
         },
         "node": {
           "type": "Object",
@@ -306,9 +306,9 @@
           "reactive": true
         },
         "tree": {
-          "type": "Object",
-          "desc": "QTree instance",
-          "__exemption": [ "examples" ]
+          "type": "Component",
+          "tsType": "QTree",
+          "desc": "QTree instance"
         },
         "node": {
           "type": "Object",

package/src/components/tree/QTree.sass

@@ -130,47 +130,51 @@
     .q-tree__node-body:after
       display: none !important
 
-  &--dense .q-tree
-    &__arrow,
-    &__spinner
-      margin-right: 1px
-
-    &__img
-      height: 32px
-
-    &__tickbox
-      margin-right: 3px
-
-    &__node
-      padding: 0
-      &:after
-        top: 0
-        left: -8px
-
-    &__node-header
-      margin-top: 0
-      padding: 1px
-      &:before
-        top: 0
-        left: -8px
-        width: 8px
-
-    &__node--child
-      padding-left: 17px
-      > .q-tree__node-header:before
-        left: -25px
-        width: 21px
-
-    &__node-body
-      padding: 0 0 2px
-
-    &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
-      padding: 0 0 2px 20px
-      &:after
-        left: 8px
-
-    &__children
-      padding-left: 16px
+  &--dense
+    > .q-tree__node--child > .q-tree__node-header
+      padding-left: 1px
+
+    .q-tree
+      &__arrow,
+      &__spinner
+        margin-right: 1px
+
+      &__img
+        height: 32px
+
+      &__tickbox
+        margin-right: 3px
+
+      &__node
+        padding: 0
+        &:after
+          top: 0
+          left: -8px
+
+      &__node-header
+        margin-top: 0
+        padding: 1px
+        &:before
+          top: 0
+          left: -8px
+          width: 8px
+
+      &__node--child
+        padding-left: 17px
+        > .q-tree__node-header:before
+          left: -25px
+          width: 21px
+
+      &__node-body
+        padding: 0 0 2px
+
+      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
+        padding: 0 0 2px 20px
+        &:after
+          left: 8px
+
+      &__children
+        padding-left: 16px
 
 [dir=rtl]
   .q-tree__arrow

package/src/components/virtual-scroll/QVirtualScroll.json

@@ -67,6 +67,21 @@
     }
   },
 
+  "events": {
+    "virtual-scroll": {
+      "params": {
+        "details": {
+          "definition": {
+            "ref": {
+              "tsType": "QVirtualScroll",
+              "desc": "Vue reference to the QVirtualScroll"
+            }
+          }
+        }
+      }
+    }
+  },
+
   "slots" : {
     "before": {
       "desc": "Template slot for the elements that should be rendered before the list; Suggestion: thead before a table"

package/src/components/virtual-scroll/use-virtual-scroll.json

@@ -95,12 +95,9 @@
               "values": [ "increase", "decrease" ]
             },
             "ref": {
-              "type": "Object",
+              "type": "Component",
               "required": true,
-              "desc": "Vue reference to the QVirtualList which triggered the event",
-              "__exemption": [
-                "examples"
-              ]
+              "desc": "Vue reference to the component which triggered the event"
             }
           }
         }

package/src/plugins/Dialog.json

@@ -306,9 +306,8 @@
             },
 
             "component": {
-              "type": "Any",
-              "desc": "Use custom dialog component; use along with 'componentProps' prop where possible",
-              "__exemption": [ "examples" ]
+              "type": "Component",
+              "desc": "Use custom dialog component; use along with 'componentProps' prop where possible"
             },
 
             "componentProps": {