quasar 2.2.0 → 2.2.4

package/dist/ssr-directives/Morph.js

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

package/dist/types/index.d.ts

@@ -6218,9 +6218,25 @@ export interface QOptionGroupProps {
    */
   modelValue: any;
   /**
-   * Array of objects with value and label props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly
+   * Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly
    */
-  options?: any[] | undefined;
+  options?:
+    | {
+        /**
+         * Label to display along the component
+         */
+        label: string;
+        /**
+         * Value of the option that will be used by the component model
+         */
+        value: any;
+        /**
+         * If true, the option will be disabled
+         */
+        disable?: boolean;
+        [index: string]: any;
+      }[]
+    | undefined;
   /**
    * Used to specify the name of the controls; Useful if dealing with forms submitted directly to a URL
    */
@@ -7113,9 +7129,9 @@ export interface QRangeProps {
    */
   labelAlways?: boolean | undefined;
   /**
-   * Display markers on the track, one for each possible value for the model
+   * Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
    */
-  markers?: boolean | undefined;
+  markers?: boolean | number | undefined;
   /**
    * Snap thumbs on valid values, rather than sliding freely; Suggestion: use with 'step' prop
    */
@@ -8311,7 +8327,7 @@ export interface QSeparatorProps {
    */
   spaced?: boolean | string | undefined;
   /**
-   * if set to true, the left and right margins will be set to 16px. If set to item, the left and right margins will be set to 72px. If set to item-thumbnail, the left margin is set to 116px and right margin is set to 0px
+   * If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side
    */
   inset?: boolean | string | undefined;
   /**
@@ -8622,9 +8638,9 @@ export interface QSliderProps {
    */
   labelAlways?: boolean | undefined;
   /**
-   * Display markers on the track, one for each possible value for the model
+   * Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
    */
-  markers?: boolean | undefined;
+  markers?: boolean | number | undefined;
   /**
    * Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop
    */
@@ -9621,7 +9637,7 @@ export interface QTableProps {
          * Horizontal alignment of cells in this column
          * Default value: right
          */
-        align?: string;
+        align?: "left" | "right" | "center";
         /**
          * Tell QTable you want this column sortable
          */
@@ -11902,6 +11918,10 @@ export interface QTreeProps {
    * Color name for selected nodes (from the Quasar Color Palette)
    */
   selectedColor?: string | undefined;
+  /**
+   * Dense mode; occupies less space
+   */
+  dense?: boolean | undefined;
   /**
    * Notify the component that the background is a dark color
    */

package/dist/vetur/quasar-attributes.json

@@ -2961,7 +2961,7 @@
   },
   "q-option-group/options": {
     "type": "array",
-    "description": "Array of objects with value and label props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly"
+    "description": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly"
   },
   "q-option-group/name": {
     "type": "string",
@@ -3444,8 +3444,8 @@
     "description": "Always display the labels"
   },
   "q-range/markers": {
-    "type": "boolean",
-    "description": "Display markers on the track, one for each possible value for the model"
+    "type": "boolean|number",
+    "description": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)"
   },
   "q-range/snap": {
     "type": "boolean",
@@ -3937,7 +3937,7 @@
   },
   "q-separator/inset": {
     "type": "boolean|string",
-    "description": "if set to true, the left and right margins will be set to 16px. If set to item, the left and right margins will be set to 72px. If set to item-thumbnail, the left margin is set to 116px and right margin is set to 0px"
+    "description": "If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side"
   },
   "q-separator/vertical": {
     "type": "boolean",
@@ -4072,8 +4072,8 @@
     "description": "Always display the label"
   },
   "q-slider/markers": {
-    "type": "boolean",
-    "description": "Display markers on the track, one for each possible value for the model"
+    "type": "boolean|number",
+    "description": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)"
   },
   "q-slider/snap": {
     "type": "boolean",
@@ -5347,6 +5347,10 @@
     "type": "string",
     "description": "Color name for selected nodes (from the Quasar Color Palette)"
   },
+  "q-tree/dense": {
+    "type": "boolean",
+    "description": "Dense mode; occupies less space"
+  },
   "q-tree/dark": {
     "type": "boolean",
     "description": "Notify the component that the background is a dark color"

package/dist/vetur/quasar-tags.json

@@ -1924,6 +1924,7 @@
       "control-color",
       "text-color",
       "selected-color",
+      "dense",
       "dark",
       "icon",
       "tick-strategy",

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.2.0",
+  "version": "2.2.4",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -9454,7 +9454,7 @@
                 "kind": "expression",
                 "type": "any[]"
               },
-              "description": "Array of objects with value and label props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly\n\nExamples:\n:options=\"[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]\"",
+              "description": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly\n\nExamples:\n:options=\"[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]\"",
               "doc-url": "https://v2.quasar.dev/vue-components/option-group"
             },
             {
@@ -11042,11 +11042,10 @@
               "name": "markers",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "boolean|number"
               },
-              "description": "Display markers on the track, one for each possible value for the model",
-              "doc-url": "https://v2.quasar.dev/vue-components/range",
-              "type": "boolean"
+              "description": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)\n\nExamples:\nmarkers\n:markers=\"5\"",
+              "doc-url": "https://v2.quasar.dev/vue-components/range"
             },
             {
               "name": "snap",
@@ -12664,7 +12663,7 @@
                 "kind": "expression",
                 "type": "boolean|string"
               },
-              "description": "if set to true, the left and right margins will be set to 16px. If set to item, the left and right margins will be set to 72px. If set to item-thumbnail, the left margin is set to 116px and right margin is set to 0px\n\nExamples:\nitem\nitem-thumbnail",
+              "description": "If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side\n\nExamples:\nitem\nitem-thumbnail",
               "doc-url": "https://v2.quasar.dev/vue-components/separator"
             },
             {
@@ -13164,11 +13163,10 @@
               "name": "markers",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "boolean|number"
               },
-              "description": "Display markers on the track, one for each possible value for the model",
-              "doc-url": "https://v2.quasar.dev/vue-components/slider",
-              "type": "boolean"
+              "description": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)\n\nExamples:\nmarkers\n:markers=\"5\"",
+              "doc-url": "https://v2.quasar.dev/vue-components/slider"
             },
             {
               "name": "snap",
@@ -17429,6 +17427,16 @@
               "description": "Color name for selected nodes (from the Quasar Color Palette)\n\nExamples:\nprimary\nteal-10",
               "doc-url": "https://v2.quasar.dev/vue-components/tree"
             },
+            {
+              "name": "dense",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Dense mode; occupies less space",
+              "doc-url": "https://v2.quasar.dev/vue-components/tree",
+              "type": "boolean"
+            },
             {
               "name": "dark",
               "value": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.2.0",
+  "version": "2.2.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/ajax-bar/QAjaxBar.js

@@ -1,5 +1,6 @@
-import { h, defineComponent, ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 
 const
@@ -74,7 +75,7 @@ function restoreAjax (start, stop) {
   }
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QAjaxBar',
 
   props: {

package/src/components/avatar/QAvatar.js

@@ -1,12 +1,13 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlotSafely } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QAvatar',
 
   props: {

package/src/components/badge/QBadge.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
 const alignValues = [ 'top', 'middle', 'bottom' ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QBadge',
 
   props: {

package/src/components/banner/QBanner.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QBanner',
 
   props: {

package/src/components/bar/QBar.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QBar',
 
   props: {

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -1,11 +1,12 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
 import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { getNormalizedVNodes } from '../../utils/private/vm.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QBreadcrumbs',
 
   props: {

package/src/components/breadcrumbs/QBreadcrumbsEl.js

@@ -1,11 +1,12 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlot } from '../../utils/private/render.js'
 import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QBreadcrumbsEl',
 
   props: {

package/src/components/btn/QBtn.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, Transition, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, Transition, onBeforeUnmount, withDirectives, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QSpinner from '../spinner/QSpinner.js'
@@ -7,7 +7,8 @@ import Ripple from '../../directives/Ripple.js'
 
 import useBtn, { useBtnProps } from './use-btn.js'
 
-import { hMergeSlot, hDir } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private/create.js'
+import { hMergeSlot } from '../../utils/private/render.js'
 import { stop, prevent, stopAndPrevent, listenOpts } from '../../utils/event.js'
 import { isKeyCode } from '../../utils/private/key-composition.js'
 
@@ -18,7 +19,7 @@ let
   keyboardTarget = null,
   mouseTarget = null
 
-export default defineComponent({
+export default createComponent({
   name: 'QBtn',
 
   props: {
@@ -50,7 +51,7 @@ export default defineComponent({
     )
 
     const ripple = computed(() => (
-      props.ripple === false
+      props.disable === true || props.ripple === false
         ? false
         : {
             keyCodes: isLink.value === true ? [ 13, 32 ] : [ 13 ],
@@ -58,6 +59,8 @@ export default defineComponent({
           }
     ))
 
+    const rippleProps = computed(() => ({ center: props.round }))
+
     const percentageStyle = computed(() => {
       const val = Math.max(0, Math.min(100, props.percentage))
       return val > 0
@@ -91,16 +94,6 @@ export default defineComponent({
       }
     })
 
-    const directives = computed(() => {
-      // if props.disable !== true && props.ripple !== false
-      return [ [
-        Ripple,
-        ripple.value,
-        void 0,
-        { center: props.round }
-      ] ]
-    })
-
     const nodeProps = computed(() => ({
       ref: rootRef,
       class: 'q-btn q-btn-item non-selectable no-outline ' + classes.value,
@@ -364,13 +357,18 @@ export default defineComponent({
         ))
       )
 
-      return hDir(
-        isLink.value === true ? 'a' : 'button',
-        nodeProps.value,
-        child,
-        'ripple',
-        props.disable !== true && props.ripple !== false,
-        () => directives.value
+      return withDirectives(
+        h(
+          isLink.value === true ? 'a' : 'button',
+          nodeProps.value,
+          child
+        ),
+        [ [
+          Ripple,
+          ripple.value,
+          void 0,
+          rippleProps.value
+        ] ]
       )
     }
   }

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

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, onMounted, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onMounted, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QBtn from '../btn/QBtn.js'
@@ -7,10 +7,11 @@ import QMenu from '../menu/QMenu.js'
 
 import { useBtnProps } from '../btn/use-btn.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stop } from '../../utils/event.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QBtnDropdown',
 
   props: {

package/src/components/btn-group/QBtnGroup.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QBtnGroup',
 
   props: {

package/src/components/btn-toggle/QBtnToggle.js

@@ -1,13 +1,14 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import QBtnGroup from '../btn-group/QBtnGroup.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
 import { hMergeSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QBtnToggle',
 
   props: {

package/src/components/card/QCard.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QCard',
 
   props: {

package/src/components/card/QCardActions.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
 import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QCardActions',
 
   props: {

package/src/components/card/QCardSection.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QCardSection',
 
   props: {

package/src/components/carousel/QCarousel.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 
@@ -6,13 +6,14 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private/use-panel.js'
 import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private/use-fullscreen.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { isNumber } from '../../utils/private/is.js'
 import { hMergeSlot, hDir } from '../../utils/private/render.js'
 
 const navigationPositionOptions = [ 'top', 'right', 'bottom', 'left' ]
 const controlTypeOptions = [ 'regular', 'flat', 'outline', 'push', 'unelevated' ]
 
-export default defineComponent({
+export default createComponent({
   name: 'QCarousel',
 
   props: {

package/src/components/carousel/QCarouselControl.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QCarouselControl',
 
   props: {

package/src/components/carousel/QCarouselSlide.js

@@ -1,10 +1,11 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { usePanelChildProps } from '../../composables/private/use-panel.js'
 
 import { hSlot } from '../../utils/private/render.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QCarouselSlide',
 
   props: {

package/src/components/chat/QChatMessage.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, computed } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import { getNormalizedVNodes } from '../../utils/private/vm.js'
 
-export default defineComponent({
+export default createComponent({
   name: 'QChatMessage',
 
   props: {

package/src/components/checkbox/QCheckbox.js

@@ -1,5 +1,6 @@
-import { h, defineComponent } from 'vue'
+import { h } from 'vue'
 
+import { createComponent } from '../../utils/private/create.js'
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
 
 const bgNode = h('div', {
@@ -23,7 +24,7 @@ const bgNode = h('div', {
   ])
 ])
 
-export default defineComponent({
+export default createComponent({
   name: 'QCheckbox',
 
   props: useCheckboxProps,

package/src/components/chip/QChip.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -7,6 +7,7 @@ import Ripple from '../../directives/Ripple.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { hMergeSlotSafely, hDir } from '../../utils/private/render.js'
 
@@ -18,7 +19,7 @@ const defaultSizes = {
   xl: 24
 }
 
-export default defineComponent({
+export default createComponent({
   name: 'QChip',
 
   props: {

package/src/components/circular-progress/QCircularProgress.js

@@ -1,8 +1,9 @@
-import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+import { h, computed, getCurrentInstance } from 'vue'
 
 import useSize from '../../composables/private/use-size.js'
 import { useCircularCommonProps } from './use-circular-progress.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlotSafely } from '../../utils/private/render.js'
 import { between } from '../../utils/format.js'
 
@@ -12,7 +13,7 @@ const
   circumference = diameter * Math.PI,
   strokeDashArray = Math.round(circumference * 1000) / 1000
 
-export default defineComponent({
+export default createComponent({
   name: 'QCircularProgress',
 
   props: {