quasar 2.2.2 → 2.3.1

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"
@@ -2132,7 +2136,7 @@
     "description": "Adds a default shadow to the footer"
   },
   "q-footer/height-hint": {
-    "type": "number|string ",
+    "type": "number|string",
     "description": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter"
   },
   "q-form/autofocus": {
@@ -2172,7 +2176,7 @@
     "description": "Adds a default shadow to the header"
   },
   "q-header/height-hint": {
-    "type": "number|string ",
+    "type": "number|string",
     "description": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader"
   },
   "q-icon/size": {
@@ -2575,6 +2579,10 @@
     "type": "string",
     "description": "One of Quasar's embedded transitions"
   },
+  "q-intersection/transition-duration": {
+    "type": "string|number",
+    "description": "Transition duration (in milliseconds, without unit)"
+  },
   "q-intersection/disable": {
     "type": "boolean",
     "description": "Disable visibility observable (content will remain as it was, visible or hidden)"
@@ -2819,6 +2827,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"
@@ -5347,6 +5359,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": ""
   },
@@ -844,6 +845,7 @@
       "margin",
       "threshold",
       "transition",
+      "transition-duration",
       "disable"
     ],
     "description": ""
@@ -939,7 +941,8 @@
       "indeterminate",
       "query",
       "rounded",
-      "instant-feedback"
+      "instant-feedback",
+      "animation-speed"
     ],
     "description": ""
   },
@@ -1924,6 +1927,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.2",
+  "version": "2.3.1",
   "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": [
@@ -6705,7 +6715,7 @@
               "name": "height-hint",
               "value": {
                 "kind": "expression",
-                "type": "number|String "
+                "type": "number|string"
               },
               "description": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter\n\nExamples:\n150",
               "doc-url": "https://v2.quasar.dev/layout/header-and-footer",
@@ -6897,7 +6907,7 @@
               "name": "height-hint",
               "value": {
                 "kind": "expression",
-                "type": "number|String "
+                "type": "number|string"
               },
               "description": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader\n\nExamples:\n150",
               "doc-url": "https://v2.quasar.dev/layout/header-and-footer",
@@ -8140,6 +8150,16 @@
               "description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
               "doc-url": "https://v2.quasar.dev/vue-components/intersection"
             },
+            {
+              "name": "transition-duration",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Transition duration (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/intersection",
+              "default": "300"
+            },
             {
               "name": "disable",
               "value": {
@@ -8952,6 +8972,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": [
@@ -11517,6 +11547,7 @@
                 {
                   "name": "info",
                   "type": "object",
+                  "description": "An object containing scroll information",
                   "doc-url": "https://v2.quasar.dev/vue-components/scroll-area"
                 }
               ],
@@ -17427,6 +17458,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.2",
+  "version": "2.3.1",
   "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",
@@ -67,6 +67,8 @@
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",
+    "cli-highlight": "^2.1.11",
+    "diff": "^5.0.0",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-friendly-formatter": "^4.0.1",
@@ -75,6 +77,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.0.0",
     "eslint-webpack-plugin": "^2.4.1",
+    "fast-glob": "^3.2.7",
     "json-beautify": "^1.1.1",
     "module-alias": "^2.2.2",
     "prettier": "^2.4.1",

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/body.js

@@ -82,12 +82,18 @@ export default {
       }
 
       ssrContext._meta.bodyClasses += cls.join(' ')
-      return
-    }
 
-    const { $q } = opts
+      const brand = $q.config.brand
+      if (brand !== void 0) {
+        const vars = Object.keys(brand)
+          .map(key => `--q-${ key }:${ brand[ key ] };`)
+          .join('')
+
+        ssrContext._meta.endingHeadTags += `<style>:root{${ vars }}</style>`
+      }
 
-    $q.config.brand !== void 0 && setColors($q.config.brand)
+      return
+    }
 
     if (this.__installed === true) { return }
 
@@ -95,6 +101,10 @@ export default {
       applyClientSsrCorrections()
     }
     else {
+      const { $q } = opts
+
+      $q.config.brand !== void 0 && setColors($q.config.brand)
+
       const cls = getBodyClasses(client, $q.config)
       document.body.classList.add.apply(document.body.classList, cls)
     }

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.3"
     }
   },