Implemented DeferredContent component

exports/deferredcontent.d.ts

@@ -0,0 +1 @@
+export * from './components/deferredcontent/DeferredContent';

exports/deferredcontent.js

@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/deferredcontent/DeferredContent.vue');
+            

src/AppMenu.vue

@@ -75,9 +75,10 @@
                     <div>
                         <router-link to="/accordion">&#9679; Accordion</router-link>
                         <router-link to="/card">&#9679; Card</router-link>
-                        <router-link to="/panel">&#9679; Panel</router-link>
+                        <router-link to="/deferredcontent">&#9679; Deferred</router-link>
                         <router-link to="/fieldset">&#9679; Fieldset</router-link>
                         <router-link to="/flexgrid">&#9679; FlexGrid</router-link>
+                        <router-link to="/panel">&#9679; Panel</router-link>
                         <router-link to="/tabview">&#9679; TabView</router-link>
                         <router-link to="/toolbar">&#9679; Toolbar</router-link>
                     </div>

src/components/deferredcontent/DeferredContent.d.ts

@@ -0,0 +1,8 @@
+import Vue, {VNode} from 'vue';
+
+export declare class DeferredContent extends Vue {
+    $emit(eventName: 'load'): this;
+    $slots: {
+        '': VNode[];
+    }
+}

src/components/deferredcontent/DeferredContent.vue

@@ -0,0 +1,66 @@
+<template>
+    <div ref="container">
+        <slot v-if="loaded"></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+           loaded: false
+        } 
+    },
+    mounted() {
+        if (!this.loaded) {
+            if (this.shouldLoad())
+                this.load();
+            else
+                this.bindScrollListener();
+        }
+    },
+    beforeDestroy() {
+        this.unbindScrollListener();
+    },
+    methods: {
+        bindScrollListener() {
+            this.documentScrollListener = () => {
+                if (this.shouldLoad()) {
+                    this.load();
+                    this.unbindScrollListener();
+                }
+            };
+
+            window.addEventListener('scroll', this.documentScrollListener);
+        },
+        unbindScrollListener() {
+            if (this.documentScrollListener) {
+                window.removeEventListener('scroll', this.documentScrollListener);
+                this.documentScrollListener = null;
+            }
+        },
+        shouldLoad() {
+            if (this.loaded) {
+                return false;
+            }
+            else {
+                const rect = this.$refs.container.getBoundingClientRect();
+                const docElement = document.documentElement;
+                const winHeight = docElement.clientHeight;
+        
+                return (winHeight >= rect.top);
+            }
+        },
+        load() {
+            this.loaded = true;
+            this.$emit('load', event);
+        }
+    }
+}
+</script>
+
+    
+
+    componentWillUnmount() {
+        this.unbindScrollListener();
+    }

src/main.js

@@ -14,6 +14,7 @@ import Column from './components/column/Column';
 import DataTable from './components/datatable/DataTable';
 import DataView from './components/dataview/DataView';
 import DataViewLayoutOptions from './components/dataviewlayoutoptions/DataViewLayoutOptions';
+import DeferredContent from './components/deferredcontent/DeferredContent';
 import Dialog from './components/dialog/Dialog';
 import Dropdown from './components/dropdown/Dropdown';
 import Editor from './components/editor/Editor';
@@ -78,6 +79,7 @@ Vue.component('Column', Column);
 Vue.component('DataTable', DataTable);
 Vue.component('DataView', DataView);
 Vue.component('DataViewLayoutOptions', DataViewLayoutOptions);
+Vue.component('DeferredContent', DeferredContent);
 Vue.component('Dialog', Dialog);
 Vue.component('Dropdown', Dropdown);
 Vue.component('Editor', Editor);

src/router.js

@@ -165,6 +165,11 @@ export default new Router({
 			path: '/dataview',
 			name: 'dataview',
 			component: () => import('./views/dataview/DataViewDemo.vue')
+        },
+        {
+			path: '/deferredcontent',
+			name: 'deferredcontent',
+			component: () => import('./views/deferredcontent/DeferredContentDemo.vue')
         },
 		{
 			path: '/dialog',

src/views/deferredcontent/DeferredContentDemo.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>DeferredContent</h1>
+                <p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll..</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div style="height: 800px">
+                Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
+            </div>
+
+            <DeferredContent @load="onImageLoad">
+                <img src="demo/images/nature/nature4.jpg" alt="Nature"/>
+            </DeferredContent>
+
+            <div style="height: 500px">
+            </div>
+
+            <DeferredContent @load="onDataLoad">
+                <DataTable :value="cars">
+                    <Column field="vin" header="Vin"></Column>
+                    <Column field="year" header="Year"></Column>
+                    <Column field="brand" header="Brand"></Column>
+                    <Column field="color" header="Color"></Column>
+                </DataTable>
+            </DeferredContent>
+        </div>
+
+        <DeferredContentDoc />
+    </div>
+</template>
+<script>
+import CarService from '../../service/CarService';
+import DeferredContentDoc from './DeferredContentDoc';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    methods: {
+        onImageLoad() {
+            this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
+        },
+        onDataLoad() {
+            this.carService.getCarsSmall().then(data => this.cars = data);
+            this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
+        }
+    },
+    components: {
+        'DeferredContentDoc': DeferredContentDoc
+    }
+}
+</script>

src/views/deferredcontent/DeferredContentDoc.vue

@@ -0,0 +1,136 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import DeferredContent from 'primevue/deferredcontent';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>DeferredContent is used as a wrapper element of its content..</p>
+<CodeHighlight>
+<template v-pre>
+&lt;DeferredContent&gt;
+    &lt;DataTable :value="cars"&gt;
+        &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+        &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+        &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+        &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+    &lt;/DataTable&gt;
+&lt;/DeferredContent&gt;
+</template>
+</CodeHighlight>
+
+                <h3>Load Event</h3>
+                <p>onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;DeferredContent @load="onDataLoad"&gt;
+    &lt;DataTable :value="cars"&gt;
+        &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+        &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+        &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+        &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+    &lt;/DataTable&gt;
+&lt;/DeferredContent&gt;
+</template>
+</CodeHighlight>
+
+				<h3>Properties</h3>
+				<p>Component has no properties.</p>
+
+				<h3>Events</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Parameters</th>
+							<th>Description</th>
+						</tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>load</td>
+                                <td>event: Event object</td>
+                                <td>Callback to invoke when deferred content is loaded..</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Component does not apply any styling.</p>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/deferredcontent" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;div&gt;
+    &lt;div class="content-section introduction"&gt;
+        &lt;div class="feature-intro"&gt;
+            &lt;h1&gt;DeferredContent&lt;/h1&gt;
+            &lt;p&gt;DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll..&lt;/p&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="content-section implementation"&gt;
+        &lt;div style="height: 800px"&gt;
+            Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
+        &lt;/div&gt;
+
+        &lt;DeferredContent @load="onImageLoad"&gt;
+            &lt;img src="demo/images/nature/nature4.jpg" alt="Nature"/&gt;
+        &lt;/DeferredContent&gt;
+
+        &lt;div style="height: 500px"&gt;
+        &lt;/div&gt;
+
+        &lt;DeferredContent @load="onDataLoad"&gt;
+            &lt;DataTable :value="cars"&gt;
+                &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+                &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
+                &lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
+                &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
+            &lt;/DataTable&gt;
+        &lt;/DeferredContent&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    methods: {
+        onImageLoad() {
+            this.$toast.add({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
+        },
+        onDataLoad() {
+            this.carService.getCarsSmall().then(data => this.cars = data);
+            this.$toast.add({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
+        }
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>