vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Resolved #211 - New Component: BlockUI

pull/256/head
cagataycivici 2020-03-16 14:18:22 +03:00
parent d859434b29
commit 1ef72bf163
10 changed files with 391 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
exports/blockui.d.ts vendored Normal file
View File

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

2
exports/blockui.js Normal file
View File

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

1
src/AppMenu.vue
View File

@ -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>

13
src/components/blockui/BlockUI.d.ts vendored Normal file
View File

@ -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[];
}
}

100
src/components/blockui/BlockUI.vue Normal file
View File

@ -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>

2
src/main.js
View File

@ -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);

5
src/router.js
View File

@ -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',

74
src/views/blockui/BlockUIDemo.vue Normal file
View File

@ -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>

192
src/views/blockui/BlockUIDoc.vue Normal file
View File

@ -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>

2
src/views/breadcrumb/BreadcrumbDoc.vue
View File

@ -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>