feat(QIntersection): allow HTML tag to be used for wrapper element

docs/src/assets/menu.js

@@ -871,6 +871,7 @@ const components = [
   },
   {
     name: 'Intersection',
+    badge: 'update',
     path: 'intersection'
   },
   {

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

@@ -9,7 +9,7 @@ related:
 
 The QIntersection component is essentially a wrapper over the [Intersection directive](/vue-directives/intersection) with the added benefit that it handles the state by itself (does not requires you to add it and handle it manually) and can optionally have a show/hide transition as well.
 
-The main benefit of using QIntersection is, however, that the DOM tree is freed up of hidden nodes thus using the minimum possible RAM memory and making the page feel very snappy.
+The main benefit of using QIntersection is, however, that the DOM tree is freed up of hidden nodes thus using the minimum possible RAM memory and making the page feel very snappy. As well, you can specify the `tag` property for the wrapper element to match your own needs, thus eliminating yet another DOM node.
 
 Under the covers, it uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
 

ui/dev/src/pages/components/intersection2.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="q-pa-md">
+    <div>
+      <q-toggle v-model="visible" label="Visible" />
+      <q-toggle v-model="once" label="Once" />
+      <q-select v-model="transition" :options="['', 'fade', 'scale', 'flip-right']" style="min-width: 250px" />
+    </div>
+    <div class="row justify-center q-gutter-sm" v-if="visible">
+      <q-intersection
+        v-for="index in 600"
+        :key="index"
+        :once="once"
+        :transition="transition"
+        :tag="tags[index % 2]"
+        class="int-example-item flex flex-center"
+      >
+        <q-card class="q-ma-sm">
+          <img src="https://cdn.quasar.dev/img/mountains.jpg">
+
+          <q-card-section>
+            <div class="text-h6">
+              Card #{{ index }}
+            </div>
+            <div class="text-subtitle2">
+              by John Doe
+            </div>
+          </q-card-section>
+        </q-card>
+      </q-intersection>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: true,
+      once: false,
+      transition: 'scale',
+      tags: ['div', 'blockquote']
+    }
+  }
+}
+</script>
+
+<style lang="sass">
+.int-example-item
+  height: 290px
+  width: 290px
+</style>

ui/dev/src/pages/components/intersection3.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="q-pa-md">
+    <div>
+      <q-toggle v-model="visible" label="Visible" />
+      <q-toggle v-model="once" label="Once" />
+      <q-select v-model="transition" :options="['', 'fade', 'scale', 'flip-right']" style="min-width: 250px" />
+    </div>
+    <table v-if="visible">
+      <tr
+        v-for="index in 10"
+        :key="index"
+      >
+        <q-intersection
+          v-for="i in 4"
+          :key="index * 10 + i"
+          :once="once"
+          :transition="transition"
+          tag="td"
+          class="int-example-item"
+        >
+          <q-card class="q-ma-sm">
+            <img src="https://cdn.quasar.dev/img/mountains.jpg">
+
+            <q-card-section>
+              <div class="text-h6">
+                Card #{{ index }}
+              </div>
+              <div class="text-subtitle2">
+                by John Doe
+              </div>
+            </q-card-section>
+          </q-card>
+        </q-intersection>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: true,
+      once: false,
+      transition: 'scale'
+    }
+  }
+}
+</script>
+
+<style lang="sass">
+.int-example-item
+  height: 290px
+  width: 290px
+</style>

ui/src/components/intersection/QIntersection.js

@@ -1,11 +1,14 @@
 import Vue from 'vue'
 
 import Intersection from '../../directives/Intersection.js'
+import TagMixin from '../../mixins/tag.js'
 import { slot } from '../../utils/slot.js'
 
 export default Vue.extend({
   name: 'QIntersection',
 
+  mixins: [ TagMixin ],
+
   directives: {
     Intersection
   },
@@ -57,7 +60,7 @@ export default Vue.extend({
       ? [ h('div', { key: 'content' }, slot(this, 'default')) ]
       : void 0
 
-    return h('div', {
+    return h(this.tag, {
       staticClass: 'q-intersection',
       on: this.$listeners,
       directives: this.disable === true ? null : [{

ui/src/components/intersection/QIntersection.json

@@ -1,4 +1,6 @@
 {
+  "mixins": [ "mixins/tag" ],
+
   "meta": {
     "docsUrl": "https://v1.quasar.dev/vue-components/intersection"
   },
@@ -8,6 +10,11 @@
   },
 
   "props": {
+    "tag": {
+      "examples": [ "div", "span", "blockquote" ],
+      "addedIn": "v1.9.3"
+    },
+
     "once": {
       "type": "Boolean",
       "desc": "Get triggered only once",