quasar 2.2.1 → 2.3.0

package/dist/ssr-directives/Morph.js

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

package/dist/types/index.d.ts

@@ -2699,6 +2699,11 @@ export interface QCircularProgressProps {
    * No animation when model changes
    */
   instantFeedback?: boolean | undefined;
+  /**
+   * Animation speed (in milliseconds, without unit)
+   * Default value: 600
+   */
+  animationSpeed?: string | number | undefined;
 }
 
 export interface QCircularProgressSlots {
@@ -5932,6 +5937,11 @@ export interface QLinearProgressProps {
    * No transition when model changes
    */
   instantFeedback?: boolean | undefined;
+  /**
+   * Animation speed (in milliseconds, without unit)
+   * Default value: 300
+   */
+  animationSpeed?: string | number | undefined;
 }
 
 export interface QLinearProgressSlots {
@@ -6218,9 +6228,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
    */
@@ -9621,7 +9647,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 +11928,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

@@ -1027,6 +1027,10 @@
     "type": "boolean",
     "description": "No animation when model changes"
   },
+  "q-circular-progress/animation-speed": {
+    "type": "string|number",
+    "description": "Animation speed (in milliseconds, without unit)"
+  },
   "q-color/name": {
     "type": "string",
     "description": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL"
@@ -2819,6 +2823,10 @@
     "type": "boolean",
     "description": "No transition when model changes"
   },
+  "q-linear-progress/animation-speed": {
+    "type": "string|number",
+    "description": "Animation speed (in milliseconds, without unit)"
+  },
   "q-markup-table/dense": {
     "type": "boolean",
     "description": "Dense mode; occupies less space"
@@ -2961,7 +2969,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",
@@ -5347,6 +5355,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

@@ -357,7 +357,8 @@
       "indeterminate",
       "show-value",
       "reverse",
-      "instant-feedback"
+      "instant-feedback",
+      "animation-speed"
     ],
     "description": ""
   },
@@ -939,7 +940,8 @@
       "indeterminate",
       "query",
       "rounded",
-      "instant-feedback"
+      "instant-feedback",
+      "animation-speed"
     ],
     "description": ""
   },
@@ -1924,6 +1926,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.1",
+  "version": "2.3.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -3155,6 +3155,16 @@
               "description": "No animation when model changes",
               "doc-url": "https://v2.quasar.dev/vue-components/circular-progress",
               "type": "boolean"
+            },
+            {
+              "name": "animation-speed",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Animation speed (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/circular-progress",
+              "default": "600"
             }
           ],
           "slots": [
@@ -8952,6 +8962,16 @@
               "description": "No transition when model changes",
               "doc-url": "https://v2.quasar.dev/vue-components/linear-progress",
               "type": "boolean"
+            },
+            {
+              "name": "animation-speed",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Animation speed (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/linear-progress",
+              "default": "300"
             }
           ],
           "slots": [
@@ -9454,7 +9474,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"
             },
             {
@@ -17427,6 +17447,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.1",
+  "version": "2.3.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",

package/src/api.extends.json

@@ -95,6 +95,13 @@
       "category": "transition"
     },
 
+    "animation-speed": {
+      "type": [ "String", "Number" ],
+      "desc": "Animation speed (in milliseconds, without unit)",
+      "examples": [ 500, "1200" ],
+      "category": "style"
+    },
+
     "model-value": {
       "desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
       "required": true,

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, withDirectives, 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,6 +7,7 @@ import Ripple from '../../directives/Ripple.js'
 
 import useBtn, { useBtnProps } from './use-btn.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: {

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: {
@@ -23,6 +24,11 @@ export default defineComponent({
       default: 0
     },
 
+    animationSpeed: {
+      type: [ String, Number ],
+      default: 600
+    },
+
     indeterminate: Boolean
   },
 
@@ -42,7 +48,7 @@ export default defineComponent({
 
     const circleStyle = computed(() => (
       props.instantFeedback !== true && props.indeterminate !== true
-        ? { transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease' }
+        ? { transition: `stroke-dashoffset ${ props.animationSpeed }ms ease 0s, stroke ${ props.animationSpeed }ms ease` }
         : ''
     ))
 

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

@@ -91,6 +91,12 @@
       "type": "Boolean",
       "desc": "No animation when model changes",
       "category": "behavior"
+    },
+
+    "animation-speed": {
+      "extends": "animation-speed",
+      "default": 600,
+      "addedIn": "v2.2.5"
     }
   },
 

package/src/components/color/QColor.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
 
 import TouchPan from '../../directives/TouchPan.js'
 
@@ -14,6 +14,7 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useCache from '../../composables/private/use-cache.js'
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
+import { createComponent } from '../../utils/private/create.js'
 import { testPattern } from '../../utils/patterns.js'
 import throttle from '../../utils/throttle.js'
 import { stop } from '../../utils/event.js'
@@ -35,7 +36,7 @@ const palette = [
 
 const thumbPath = 'M5 5 h10 v10 h-10 v-10 z'
 
-export default defineComponent({
+export default createComponent({
   name: 'QColor',
 
   props: {