Merge remote-tracking branch 'origin/dev' into dev

app/lib/quasar-conf-file.js

@@ -592,6 +592,8 @@ class QuasarConfFile {
       const originalBefore = cfg.devServer.before
       const openInEditor = require('launch-editor-middleware')
 
+      delete cfg.devServer.before
+
       cfg.devServer = merge({
         publicPath: cfg.build.publicPath,
         hot: true,
@@ -616,7 +618,7 @@ class QuasarConfFile {
         contentBase: false,
         watchContentBase: false,
 
-        before: app => {
+        before: (app, server, compiler) => {
           if (!this.ctx.mode.ssr) {
             const express = require('express')
 
@@ -634,7 +636,7 @@ class QuasarConfFile {
 
           app.use('/__open-in-editor', openInEditor(void 0, appPaths.appDir))
 
-          originalBefore && originalBefore(app)
+          originalBefore && originalBefore(app, server, compiler)
         }
       })
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quasar/app",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "Quasar Framework local CLI",
   "bin": {
     "quasar": "./bin/quasar"

cli/bin/quasar-serve

@@ -129,13 +129,22 @@ if (ssrDetected === false) {
 
   const
     express = require('express'),
+    resolvedIndex = resolve(argv.index),
     microCacheSeconds = argv.micro
       ? parseInt(argv.micro, 10)
       : false
 
   function serve (path, cache) {
     const opts = {
-      maxAge: cache ? parseInt(argv.cache, 10) * 1000 : 0
+      maxAge: cache ? parseInt(argv.cache, 10) * 1000 : 0,
+      setHeaders (res, path) {
+        if (res.req.method === 'GET' && path === resolvedIndex) {
+          res.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+          res.set('Pragma', 'no-cache')
+          res.set('Expires', '0')
+          res.set('Surrogate-Control', 'no-store')
+        }
+      }
     }
 
     if (argv.history !== true) {

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quasar/cli",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Quasar Framework global CLI",
   "bin": {
     "quasar": "./bin/quasar"

docs/src-pwa/register-service-worker.js

@@ -1,4 +1,6 @@
 import { register } from 'register-service-worker'
+import { Notify } from 'quasar'
+import { mdiCached } from '@quasar/extras/mdi-v5'
 
 // The ready(), registered(), cached(), updatefound() and updated()
 // events passes a ServiceWorkerRegistration instance in their arguments.
@@ -28,7 +30,28 @@ register(process.env.SERVICE_WORKER_FILE, {
   },
 
   updated (/* registration */) {
-    // console.log('New content is available; please refresh.')
+    Notify.create({
+      color: 'negative',
+      icon: mdiCached,
+      message: 'Updated content is available. Please refresh the page.',
+      timeout: 0,
+      multiLine: true,
+      position: 'top',
+      actions: [
+        {
+          label: 'Refresh',
+          color: 'yellow',
+          handler: () => {
+            window.location.reload()
+          }
+        },
+        {
+          label: 'Dismiss',
+          color: 'white',
+          handler: () => {}
+        }
+      ]
+    })
   },
 
   offline () {

docs/src/components/page-parts/releases/PackageReleases.vue

@@ -76,16 +76,18 @@ export default {
       content = content
         .replace(/### ([\S ]+)/g, '<div class="text-h6">$1</div>')
         .replace(/## ([\S ]+)/g, '<div class="text-h5">$1</div>')
-        .replace(/# ([\S ]+)g/, '<div class="text-h4">$1</div>')
+        .replace(/# ([\S ]+)/g, '<div class="text-h4">$1</div>')
         .replace(/\*\*([\S ]*?)\*\*/g, '<strong>$1</strong>')
         .replace(/\*([\S ]*?)\*/g, '<em>$1</em>')
         .replace(/```([\S]+)/g, '<code class="doc-code__inner doc-code__inner--prerendered release__code">')
         .replace(/```\n/g, '</code>')
         .replace(/`([\w ]+)`/g, '<code class="doc-token">$1</code>')
         .replace(/#([\d]+)/g, '<a class="doc-link" href="https://github.com/quasarframework/quasar/issues/$1" target="_blank">#$1</a>')
-        .replace(/^&gt; ([\S ]+)\n/g, '<div class="release__blockquote">$1</div>')
+        .replace(/^&gt; ([\S ]+)$/gm, '<div class="release__blockquote">$1</div>')
         .replace(/\[([\S ]*?)\]\((\S*?)\)/g, '<a class="doc-link" href="$2" target="_blank">$1</a>')
-        .replace(/\* ([\S .]+)\n/g, '<li>$1</li>')
+        .replace(/^ {2}[-*] ([\S .]+)$/gm, '<li class="q-pl-md">$1</li>')
+        .replace(/^[-*] ([\S .]+)$/gm, '<li>$1</li>')
+        .replace(/<\/li>[\s\n\r]*<li/g, '</li><li')
 
       return content.indexOf('| -') > -1
         ? parseMdTable(content)

docs/src/css/app.sass

@@ -143,3 +143,11 @@ kbd
 
 .q-page > .q-badge + .doc-example
   margin-top: 0
+
+.q-page
+  *
+    overflow-anchor: none
+
+  :target,
+  .q-overflow-anchor
+    overflow-anchor: auto

docs/src/examples/shadows/Inset.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-pa-md q-gutter-md">
     <div class="inset-shadow flex inline shadow-box flex-center doc-inset-shadow">
       .inset-shadow
     </div>
+
+    <div class="inset-shadow-down flex inline shadow-box flex-center doc-inset-shadow">
+      .inset-shadow-down
+    </div>
   </div>
 </template>
 
@@ -14,5 +18,8 @@
   border-radius: 50%
   font-size: 12px
 .doc-inset-shadow
+  width: 120px
+  height: 120px
   border: 1px solid #eee
+  padding: 4px
 </style>

docs/src/layouts/Layout.vue

@@ -108,6 +108,7 @@ q-layout.doc-layout(view="lHh LpR lff", @scroll="onScroll")
       leave-active-class="animated fadeOut"
       mode="out-in"
       @leave="resetScroll"
+      @enter="scrollToCurrentAnchor"
     )
       router-view
 
@@ -131,6 +132,8 @@ export default {
   name: 'Layout',
 
   created () {
+    this.preventTocUpdate = this.$route.hash.length > 1
+
     this.mdiMenu = mdiMenu
     this.mdiClipboardText = mdiClipboardText
     this.mdiHeartOutline = mdiHeartOutline
@@ -153,7 +156,9 @@ export default {
       rightDrawerState: false,
       rightDrawerOnLayout: false,
 
-      activeToc: void 0
+      activeToc: this.$route.hash.length > 1
+        ? this.$route.hash.substring(1)
+        : void 0
     }
   },
 
@@ -185,13 +190,9 @@ export default {
   },
 
   watch: {
-    $route ({ hash }) {
+    $route () {
       this.leftDrawerState = this.$q.screen.width > 1023
-      if (hash === '') {
-        this.$nextTick(() => {
-          this.updateActiveToc(document.documentElement.scrollTop || document.body.scrollTop)
-        })
-      }
+      this.scrollToCurrentAnchor()
     },
 
     hasRightDrawer (shown) {
@@ -216,46 +217,40 @@ export default {
       done()
     },
 
-    scrollTo (id) {
-      const el = document.getElementById(id)
-      if (el === null) {
-        return
+    changeRouterHash (hash) {
+      if (this.$route.hash !== hash) {
+        this.$router.push({ hash }).catch(() => {})
       }
-
-      clearTimeout(this.scrollTimer)
-
-      if (el) {
-        if (this.rightDrawerOnLayout !== true) {
-          this.rightDrawerState = false
-          this.scrollTimer = setTimeout(() => {
-            this.scrollPage(el, 500)
-          }, 300)
-        }
-        else {
-          this.scrollPage(el, 500)
-        }
-
-        el.id = ''
+      else {
+        this.scrollToCurrentAnchor()
       }
+    },
 
-      window.location.hash = '#' + id
+    scrollTo (id) {
+      clearTimeout(this.scrollTimer)
 
-      if (el) {
-        setTimeout(() => {
-          el.id = id
+      if (this.rightDrawerOnLayout !== true) {
+        this.rightDrawerState = false
+        this.scrollTimer = setTimeout(() => {
+          this.changeRouterHash('#' + id)
         }, 300)
       }
+      else {
+        this.changeRouterHash('#' + id)
+      }
     },
 
     scrollPage (el, delay) {
       const { top } = el.getBoundingClientRect()
-      const offset = top + getScrollPosition(window) - el.scrollHeight - 50
+      const offset = Math.max(0, getScrollPosition(window) + top - 66)
 
-      this.scrollingPage = true
+      clearTimeout(this.scrollTimer)
+
+      this.preventTocUpdate = true
       setScrollPosition(window, offset, delay)
 
       this.scrollTimer = setTimeout(() => {
-        this.scrollingPage = false
+        this.preventTocUpdate = false
       }, delay + 10)
     },
 
@@ -264,12 +259,19 @@ export default {
     },
 
     onScroll ({ position }) {
-      if (this.scrollingPage !== true) {
+      if (
+        this.preventTocUpdate !== true &&
+        (this.rightDrawerOnLayout === true || this.rightDrawerState !== true)
+      ) {
         this.updateActiveToc(position)
       }
     },
 
     updateActiveToc (position) {
+      if (position === void 0) {
+        position = getScrollPosition(window)
+      }
+
       const toc = this.tocList
       let last
 
@@ -321,12 +323,24 @@ export default {
       this.searchFocused = false
     },
 
-    scrollToCurrentAnchor () {
-      const hash = window.location.hash
+    scrollToCurrentAnchor (immediate) {
+      const { hash } = this.$route
+      const el = hash.length > 1
+        ? document.getElementById(hash.substring(1))
+        : null
 
-      if (hash.length > 0) {
-        const el = document.getElementById(hash.substring(1))
-        el !== null && this.scrollPage(el, 0)
+      const anchor = document.querySelector('.q-overflow-anchor')
+      if (anchor !== null) {
+        anchor.classList.remove('q-overflow-anchor')
+      }
+
+      if (el !== null) {
+        el.classList.add('q-overflow-anchor')
+        this.scrollPage(el, immediate === true ? 0 : 500)
+      }
+      else {
+        this.preventTocUpdate = false
+        this.updateActiveToc()
       }
     },
 
@@ -354,7 +368,7 @@ export default {
             const url = suggestion.url.replace('https://quasar.dev', '')
 
             this.search = ''
-            this.$router.push(url)
+            this.$router.push(url).catch(() => {})
             this.$refs.docAlgolia.blur()
           }
         })
@@ -380,7 +394,7 @@ export default {
   },
 
   mounted () {
-    this.scrollToCurrentAnchor()
+    this.scrollToCurrentAnchor(true)
     this.initializeAlgolia()
   },
 

docs/src/pages/vue-components/select.md

@@ -254,6 +254,8 @@ When QSelect is focused:
 
 When the list of options is opened:
   - pressing <kbd>ARROW UP</kbd> or <kbd>ARROW DOWN</kbd> will navigate up or down in the list of options
+  - pressing <kbd>PAGE UP</kbd> or <kbd>PAGE DOWN</kbd> will navigate one page up or down in the list of options
+  - pressing <kbd>HOME</kbd> or <kbd>END</kbd> will navigate to the start or end of the list of options (only if you are not using `use-input`, or the input is empty)
   - when navigating using arrow keys, navigation will wrap when reaching the start or end of the list
   - pressing <kbd>ENTER</kbd> (or <kbd>SPACE</kbd> when `use-input` is not set, or <kbd>TAB</kbd> when `multiple` is not set) when an option is selected in the list will:
     - select the option and close the list of options if `multiple` is not set

docs/src/router/index.js

@@ -16,7 +16,11 @@ export default function () {
   const Router = new VueRouter({
     routes,
 
-    scrollBehavior (_, __, savedPosition) {
+    scrollBehavior (to, _, savedPosition) {
+      if (to.hash.length > 1) {
+        return false
+      }
+
       return savedPosition || { x: 0, y: 0 }
     },