Resolved #211 - New Component: BlockUI

exports/blockui.d.ts

@@ -0,0 +1 @@
+export * from './components/blockui/BlockUI';

exports/blockui.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/blockui/BlockUI.vue');

src/AppMenu.vue

@@ -136,6 +136,7 @@
                 <span>Misc</span>
             </span>
             <div>
+                <router-link to="/blockui">BlockUI</router-link>
                 <router-link to="/inplace">Inplace</router-link>
                 <router-link to="/progressbar">ProgressBar</router-link>
                 <router-link to="/progressspinner">ProgressSpinner</router-link>

src/components/blockui/BlockUI.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue';
+
+export declare class BlockUI extends Vue {
+    blocked?: boolean;
+    fullScreen?: boolean;
+    baseZIndex?: number;
+    autoZIndex?: boolean;
+    $emit(eventName: 'block'): this;
+    $emit(eventName: 'unblock'): this;
+    $slots: {
+        '': VNode[];
+    }
+}

src/components/blockui/BlockUI.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="p-blockui-container">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler';
+
+export default {
+    props: {
+        blocked: {
+            type: Boolean,
+            default: false
+        },
+        fullScreen: {
+            type: Boolean,
+            default: false
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        }
+    },
+    mask: null,
+    mounted() {
+        if (this.blocked) {
+            this.block();
+        }
+    },
+    watch: {
+        blocked(newValue) {
+            if (newValue === true)
+                this.block();
+            else
+                this.unblock();
+        }
+    },
+    methods: {
+        block() {
+            if (this.fullScreen) {
+                this.mask = document.createElement('div');
+                this.mask.setAttribute('class', 'p-blockui p-component-overlay p-blockui-document');
+                document.body.appendChild(this.mask);
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
+                document.activeElement.blur();
+            }
+            else {
+                const target = this.$children ? this.$children[0]: null;
+                if (target) {
+                    this.mask = document.createElement('div');
+
+                    this.mask.setAttribute('class', 'p-blockui p-component-overlay');
+                    target.$el.appendChild(this.mask);
+                    target.$el.style.position = 'relative';
+                }
+            }
+
+            if (this.mask && this.autoZIndex) {
+                this.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
+
+            this.$emit('block');
+        },
+        unblock() {
+            if (this.fullScreen) {
+                document.body.removeChild(this.mask);
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            }
+            else {
+                this.$children[0].$el.removeChild(this.mask);
+            }
+
+            this.$emit('unblock');
+        }
+    }
+}
+</script>
+
+<style>
+.p-blockui {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.p-blockui.p-component-overlay {
+    position: absolute;
+}
+
+.p-blockui-document.p-component-overlay {
+    position: fixed;
+}
+</style>

src/main.js

@@ -4,6 +4,7 @@ import router from './router';
 import AutoComplete from './components/autocomplete/AutoComplete';
 import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordiontab/AccordionTab';
+import BlockUI from './components/blockui/BlockUI';
 import Breadcrumb from './components/breadcrumb/Breadcrumb';
 import Button from './components/button/Button';
 import Calendar from './components/calendar/Calendar';
@@ -90,6 +91,7 @@ Vue.config.productionTip = false;
 Vue.component('Accordion', Accordion);
 Vue.component('AccordionTab', AccordionTab);
 Vue.component('AutoComplete', AutoComplete);
+Vue.component('BlockUI', BlockUI);
 Vue.component('Breadcrumb', Breadcrumb);
 Vue.component('Button', Button);
 Vue.component('Calendar', Calendar);

src/router.js

@@ -41,6 +41,11 @@ export default new Router({
 			name: 'autocomplete',
 			component: () => import('./views/autocomplete/AutoCompleteDemo.vue')
         },
+        {
+			path: '/blockui',
+			name: 'blockui',
+			component: () => import('./views/blockui/BlockUIDemo.vue')
+		},
         {
 			path: '/breadcrumb',
 			name: 'breadcrumb',

src/views/blockui/BlockUIDemo.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>BlockUI</h1>
+                <p>BlockUI can either block other components or the whole page.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Document</h3>
+            <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
+
+            <Button type="button" label="Block" @click="blockDocument()"></Button>
+
+            <h3>Panel</h3>
+            <Button type="button" label="Block" @click="blockPanel()"></Button>
+            <Button type="button" label="Unblock" @click="unblockPanel()"></Button>
+
+            <BlockUI :blocked="blockedPanel">
+                <Panel header="Godfather I" style="margin-top: 20px">
+                    <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+                    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
+                </Panel>
+            </BlockUI>
+        </div>
+
+        <BlockUIDoc />
+    </div>
+</template>
+
+<script>
+import BlockUIDoc from './BlockUIDoc';
+
+export default {
+    data() {
+        return {
+            blockedPanel: false,
+            blockedDocument: false
+        }
+    },
+    methods: {
+        blockDocument() {
+            this.blockedDocument = true;
+
+            setTimeout(() => {
+                this.blockedDocument = false;
+            }, 3000);
+        },
+        blockPanel() {
+            this.blockedPanel = true;
+        },
+        unblockPanel() {
+            this.blockedPanel = false;
+        }
+    },
+    components: {
+        'BlockUIDoc': BlockUIDoc
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.p-panel p {
+    line-height: 1.5;
+    margin: 0;
+}
+
+button {
+    margin-right: .5em;
+}
+</style>

src/views/blockui/BlockUIDoc.vue

@@ -0,0 +1,192 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import BlockUI from 'primevue/blockui';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>BlockUI is controlled using the <i>blocked</i> property, by default target element to block is the child component. In example below, panel gets blocked
+                    with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.
+                </p>
+<CodeHighlight>
+&lt;BlockUI :blocked="blockedPanel"&gt;
+    &lt;Panel header="Header"&gt;
+        Panel Content
+    &lt;/Panel&gt;
+&lt;/BlockUI&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+export default {
+    data() {
+        return {
+            blockedPanel: false
+        }
+    },
+    methods: {
+        blockPanel() {
+            this.blockedPanel = true;
+        },
+        unblockPanel() {
+            this.blockedPanel = false;
+        }
+    }
+}
+</CodeHighlight>
+
+                <h3>Full Screen</h3>
+                <p>In full screen mode, instead of a particular element, the whole document gets blocked. Set <i>fullScreen</i> as true in order to enable this functionality.</p>
+
+<CodeHighlight>
+&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
+</CodeHighlight>
+
+                <h3>Properties</h3>
+                <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>blocked</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>Controls the blocked state.</td>
+                            </tr>
+                            <tr>
+                                <td>fullscreen</td>
+                                <td>menuitem</td>
+                                <td>null</td>
+                                <td>When enabled, the whole document gets blocked.</td>
+                            </tr>
+                             <tr>
+                                <td>baseZIndex</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Base zIndex value to use in layering.</td>
+                            </tr>
+                            <tr>
+                                <td>autoZIndex</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to automatically manage layering.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+                <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>block</td>
+							<td>-</td>
+							<td>Fired when the element gets blocked.</td>
+						</tr>
+						<tr>
+							<td>show</td>
+							<td>-</td>
+							<td>Fired when the element gets unblocked.</td>
+						</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-blockui</td>
+                                <td>Mask element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-blockui-document</td>
+                                <td>Mask element in full screen mode.</td>
+                            </tr>
+                        </tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/blockui" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+&lt;h3&gt;Document&lt;/h3&gt;
+&lt;BlockUI :blocked="blockedDocument" :fullScreen="true"&gt;&lt;/BlockUI&gt;
+
+&lt;Button type="button" label="Block" @click="blockDocument()"&gt;&lt;/Button&gt;
+
+&lt;h3&gt;Panel&lt;/h3&gt;
+&lt;Button type="button" label="Block" @click="blockPanel()"&gt;&lt;/Button&gt;
+&lt;Button type="button" label="Unblock" @click="unblockPanel()"&gt;&lt;/Button&gt;
+
+&lt;BlockUI :blocked="blockedPanel"&gt;
+    &lt;Panel header="Godfather I" style="margin-top: 20px"&gt;
+        &lt;p&gt;The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.&lt;/p&gt;
+    &lt;/Panel&gt;
+&lt;/BlockUI&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            blockedPanel: false,
+            blockedDocument: false
+        }
+    },
+    methods: {
+        blockDocument() {
+            this.blockedDocument = true;
+
+            setTimeout(() => {
+                this.blockedDocument = false;
+            }, 3000);
+        },
+        blockPanel() {
+            this.blockedPanel = true;
+        },
+        unblockPanel() {
+            this.blockedPanel = false;
+        }
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>

src/views/breadcrumb/BreadcrumbDoc.vue

@@ -66,7 +66,7 @@ export default {
 				</div>
 
 				<h3>Styling</h3>
-				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/menumodel">theming</router-link> page.</p>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>