feat(docs): QResizeObserver and QScrollObserver pages

Author: rstoenescu

docs/src/assets/menu.js

@@ -358,12 +358,12 @@ const components = [
     name: 'Observers',
     children: [
       {
-        name: 'Element Resize Observer',
-        path: 'element-resize-observer'
+        name: 'Resize Observer (for Element)',
+        path: 'resize-observer'
       },
       {
-        name: 'Window Resize Observer',
-        path: 'window-resize-observer'
+        name: 'Scroll Observer',
+        path: 'scroll-observer'
       }
     ]
   },

docs/src/examples/QResizeObserver/Basic.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="q-pa-md q-gutter-md">
+    <q-btn color="primary" push @click="setRandomSize" label="Set Random Size" />
+
+    <div :style="style" class="container bg-amber generic-border-radius glossy">
+      <!--
+        we listen for size changes on this next
+        <div>, so we place the observer as direct child:
+      -->
+      <q-resize-observer @resize="onResize" />
+    </div>
+
+    <div class="q-gutter-sm">
+      Reported:
+      <q-badge>width: {{ report.width }}</q-badge>
+      <q-badge>height: {{ report.height }}</q-badge>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      style: { width: '200px', height: '200px' },
+      report: ''
+    }
+  },
+
+  methods: {
+    onResize (size) {
+      this.report = size
+      // {
+      //   width: 20 // width of container (in px)
+      //   height: 50 // height of container (in px)
+      // }
+    },
+
+    setRandomSize () {
+      this.style = {
+        width: Math.floor(100 + Math.random() * 200) + 'px',
+        height: Math.floor(100 + Math.random() * 200) + 'px'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+  transition width .3s, height .3s
+</style>

docs/src/examples/QScrollObserver/Basic.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="q-pa-md">
+    <pre class="q-ma-none container">{{ scrollInfo }}</pre>
+    <q-scroll-observer @scroll="onScroll" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      scrollInfo: {}
+    }
+  },
+
+  methods: {
+    onScroll (info) {
+      this.scrollInfo = info
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+  font-size 12px
+</style>

docs/src/pages/vue-components/element-resize-observer.md

@@ -0,0 +1,15 @@
+---
+title: Resize Observer (for Element)
+---
+QResizeObserver is a Quasar component that emits a `resize` event whenever the wrapping DOM element / component (defined as direct parent of QResizeObserver) changes its size (width and/or height). Note that no polling is involved, but overusing it is costly too.
+
+## Installation
+<doc-installation components="QResizeObserver" />
+
+## Usage
+<doc-example title="Basic" file="QResizeObserver/Basic" />
+
+Please note that QResizeObserver will issue an event as soon as it gets rendered and attached to DOM, so you can have the initial size of the container.
+
+## API
+<doc-api file="QResizeObserver" />

docs/src/pages/vue-components/resize-observer.md

@@ -0,0 +1,51 @@
+---
+title: Scroll Observer
+---
+QScrollObserveer is a Quasar component that emits a `scroll` event whenever the user scrolls the page or overflowed container with `.scroll` CSS class applied to it.
+
+## Installation
+<doc-installation components="QScrollObserver" />
+
+## Usage
+Scroll this page to see the example below in action.
+<doc-example title="Basic" file="QScrollObserver/Basic" />
+
+## Determining Scrolling Container
+All components or directives in Quasar have a simple algorithm to determine the container that supports the scroll: it searches for a parent DOM element which has the `scroll` Quasar CSS Helper class attached to it. If none is found, then it considers that the scrolling takes place on the document itself.
+
+Components like [QScrollArea](/vue-components/scroll-area), for example, respect this design and have the `scroll` class embedded into it, so that QScrollObservable (or any other scrolling component or directive) can successfully detect it and attach the necessary event handlers to it.
+
+Please note that simply attaching `scroll` CSS class to a DOM element or on a Vue component will have no effect if the respective element is not overflowed (example, with: CSS `overflow: hidden` and a height smaller than its inner content height).
+
+Example of good container:
+```html
+<!--
+  Quasar CSS helper 'overflow-hidden' is
+  equivalent to style="overflow: hidden"
+-->
+<div class="scroll overflow-hidden" style="height: 100px">
+  ...content expanding over the 100px height from container...
+  <q-scroll-observer @scroll="scrollHandler" />
+
+  <!-- example with `v-scroll` directive -->
+  <div v-scroll="scrollHandler">...</div>
+</div>
+```
+
+One more example with QScrollArea:
+```html
+<q-scroll-area style="width: 400px; height: 500px;" class="bg-yellow">
+  ...content expanding over the 500px height from container...
+  <q-scroll-observer @scroll="scrollHandler" />
+</q-scroll-area>
+```
+
+## Layout Scrolling
+When scrolling on a Layout with a Page, rather than injecting a QScrollObservable (and by so doing registering additional scroll events) you can take advantage of [QLayout](/components/layout.html)´s `@scroll` event directly on your component defining the Layout.
+
+```html
+<q-layout @scroll="scrollHandler">...</q-layout>
+```
+
+## API
+<doc-api file="QScrollObserver" />