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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/201/head
Cagatay Civici 2020-02-14 14:33:46 +03:00
parent 9a4cd49711 8fc2175e88
commit 58bc028971
25 changed files with 563 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
CHANGELOG.md
View File

@ -1,5 +1,26 @@
# Changelog
## [1.0.3](https://github.com/primefaces/primevue/tree/1.0.3) (2020-02-07)
[Full Changelog](https://github.com/primefaces/primevue/compare/1.0.2...1.0.3)
**Implemented New Features and Enhancements:**
- Add position property to Dialog [\#184](https://github.com/primefaces/primevue/issues/184)
- Add maximizable property to Dialog [\#183](https://github.com/primefaces/primevue/issues/183)
- DataTable "$event" argument on page/sort events does not contains filterSearchMode. [\#181](https://github.com/primefaces/primevue/issues/181)
- Dialog header not visible [\#179](https://github.com/primefaces/primevue/issues/179)
- Ability to disable TieredMenu items [\#173](https://github.com/primefaces/primevue/issues/173)
- Ability to disable ContextMenu items [\#169](https://github.com/primefaces/primevue/issues/169)
- Ability to disable Menubar items [\#168](https://github.com/primefaces/primevue/issues/168)
**Fixed bugs:**
- Chart.vue : Error in v-on handler: "TypeError: this.emit is not a function" [\#188](https://github.com/primefaces/primevue/issues/188)
- OverlayPanel dismissable does not work [\#187](https://github.com/primefaces/primevue/issues/187)
- Could not find module './components/row/Row' [\#185](https://github.com/primefaces/primevue/issues/185)
- Style classes are not rendered correctly on Dialog [\#182](https://github.com/primefaces/primevue/issues/182)
## [1.0.2](https://github.com/primefaces/primevue/tree/1.0.2) (2020-01-30)
[Full Changelog](https://github.com/primefaces/primevue/compare/1.0.0...1.0.2)

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

@ -0,0 +1 @@
export * from './components/row/Row';

2
exports/row.js Normal file
View File

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

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "primevue",
"version": "1.0.3-SNAPSHOT",
"version": "1.0.5-SNAPSHOT",
"repository": {
"type": "git",
"url": "https://github.com/primefaces/primevue.git"

2
src/AppFooter.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content-section layout-footer clearfix">
<span>PrimeVue 1.0.3</span>
<span>PrimeVue 1.0.5</span>
<div class="footer-links">
<a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
<a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>

3
src/AppTopBar.vue
View File

@ -54,7 +54,8 @@
<li><a href="https://www.primefaces.org/store" target="_blank"><span>PrimeStore</span></a></li>
<li><a href="https://www.primefaces.org/category/primevue/" target="_blank"><span>Blog</span></a></li>
<li><a href="https://twitter.com/primevue?lang=en" target="_blank"><span>Twitter</span></a></li>
<li><a href="https://www.primefaces.org/whouses/" target="_blank"><span>Who Uses</span></a></li>
<li><a href="https://www.primefaces.org/whouses" target="_blank"><span>Who Uses</span></a></li>
<li><a href="https://www.primefaces.org/newsletter" target="_blank"><span>Newsletter</span></a></li>
<li><a href="https://www.primetek.com.tr" target="_blank"><span>About PrimeTek</span></a></li>
</ul>
</transition>

BIN
src/assets/images/home/vue-gold.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

19
src/assets/styles/app.scss
View File

@ -1047,6 +1047,25 @@ a {
padding: 100px 100px 0 100px;
height: 200px;
}
.introduction-promo {
display: inline-block;
margin-left: -50px;
margin-bottom: 20px;
padding: 10px 50px 10px 175px;
font-size: 1.5em;
background-image: linear-gradient(90deg, #445C72 0%, #DBDCDE 100%);
position: relative;
color: #ffffff;
font-weight: 700;
img {
position: absolute;
height: 75px;
left: 50px;
top: -12px;
}
}
}
/* Features */

2
src/components/chart/Chart.vue
View File

@ -67,7 +67,7 @@ export default {
const dataset = this.chart.getDatasetAtEvent(event);
if (element && element[0] && dataset) {
this.emit('select', {originalEvent: event, element: element[0], dataset: dataset});
this.$emit('select', {originalEvent: event, element: element[0], dataset: dataset});
}
}
},

1
src/components/contextmenu/ContextMenu.vue
View File

@ -242,6 +242,7 @@ export default {
padding: .25em;
display: block;
position: relative;
cursor: pointer;
}
.p-contextmenu .p-menuitem-icon {

10
src/components/contextmenu/ContextMenuSub.vue
View File

@ -4,13 +4,12 @@
<template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link"
@click.native="onItemClick($event, item)" role="menuitem">
<router-link v-if="item.to" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target"
@click="onItemClick($event, item)" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem">
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
:aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="item.disabled ? null : '0'">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
@ -115,6 +114,9 @@ export default {
'p-disabled': item.disabled,
}
]
},
getLinkClass(item) {
return ['p-menuitem-link', {'p-disabled': item.disabled}];
}
},
computed: {

16
src/components/datatable/DataTable.vue
View File

@ -608,7 +608,7 @@ export default {
}
let filterEvent = this.createLazyLoadEvent(event);
filterEvent.filterValue = filteredValue;
filterEvent.filteredValue = filteredValue;
this.$emit('filter', filterEvent);
return filteredValue;
@ -1598,15 +1598,25 @@ export default {
}, this.virtualScrollDelay);
},
createLazyLoadEvent(event) {
let filterMatchModes;
if (this.hasFilters) {
filterMatchModes = {};
this.columns.forEach(col => {
if (col.field) {
filterMatchModes[col.field] = col.filterMatchMode;
}
});
}
return {
originalEvent: event,
first: this.d_first,
rows: this.d_rows,
sortField: this.d_sortField,
sortOrder: this.d_sortOrder,
multiSortMeta: this.d_multiSortMeta,
filters: this.filters,
globalFilter: this.filters && this.filters['global'] ? this.filters['global'].value : null,
multiSortMeta: this.d_multiSortMeta
filterMatchModes: filterMatchModes
};
}
},

2
src/components/dialog/Dialog.d.ts vendored
View File

@ -12,6 +12,8 @@ export declare class Dialog extends Vue {
baseZIndex?: number;
autoZIndex?: boolean;
ariaCloseLabel?: string;
position?: string;
maximizable?: boolean;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$slots: {

186
src/components/dialog/Dialog.vue
View File

@ -1,12 +1,15 @@
<template>
<div ref="mask" :class="wrapperClass" v-if="maskVisible">
<div ref="mask" :class="maskClass" v-if="maskVisible">
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" @appear="onAppear">
<div ref="container" :class="containerClass" :style="containerStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
<div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
<div class="p-dialog-titlebar" v-if="showHeader">
<slot name="header">
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
</slot>
<div class="p-dialog-titlebar-icons">
<button class="p-dialog-titlebar-icon p-dialog-titlebar-maximize p-link" @click="maximize" v-if="maximizable" type="button">
<span :class="maximizeIconClass"></span>
</button>
<button class="p-dialog-titlebar-icon p-dialog-titlebar-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel" type="button">
<span class="p-dialog-titlebar-close-icon pi pi-times"></span>
</button>
@ -34,6 +37,7 @@ export default {
modal: Boolean,
contentStyle: null,
rtl: Boolean,
maximizable: Boolean,
closable: {
type: Boolean,
default: true
@ -53,13 +57,18 @@ export default {
ariaCloseLabel: {
type: String,
default: 'close'
},
position: {
type: String,
default: 'center'
}
},
data() {
return {
dialogClasses: null,
dialogStyles: null,
maskVisible: this.visible
maskVisible: this.visible,
maximized: false
}
},
documentKeydownListener: null,
@ -74,7 +83,7 @@ export default {
this.removeStylesFromMask();
},
beforeDestroy() {
this.disableModality();
this.disableDocumentSettings();
},
methods: {
close() {
@ -86,18 +95,18 @@ export default {
}
},
onEnter() {
this.$refs.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
this.$refs.mask.style.zIndex = String(parseInt(this.$refs.dialog.style.zIndex, 10) - 1);
this.$emit('show');
this.focus();
this.enableModality();
this.enableDocumentSettings();
},
onLeave() {
this.$emit('hide');
},
onAfterLeave() {
this.maskVisible = false;
this.disableModality();
this.disableDocumentSettings();
},
onAppear() {
if (this.visible) {
@ -105,27 +114,43 @@ export default {
}
},
focus() {
let focusable = DomHandler.findSingle(this.$refs.container, 'input,button');
let focusable = DomHandler.findSingle(this.$refs.dialog, 'input,button');
if (focusable) {
focusable.focus();
}
},
enableModality() {
maximize() {
this.maximized = !this.maximized;
if (!this.modal) {
if (this.maximized)
DomHandler.addClass(document.body, 'p-overflow-hidden');
else
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},
enableDocumentSettings() {
if (this.modal) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
this.bindDocumentKeydownListener();
}
else if (this.maximizable && this.maximized) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
}
},
disableModality() {
disableDocumentSettings() {
if (this.modal) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
this.unbindDocumentKeydownListener();
}
else if (this.maximizable && this.maximized) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},
onKeyDown(event) {
if (event.which === 9) {
event.preventDefault();
let focusableElements = DomHandler.getFocusableElements(this.$refs.container);
let focusableElements = DomHandler.getFocusableElements(this.$refs.dialog);
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
focusableElements[0].focus();
@ -160,16 +185,25 @@ export default {
this.documentKeydownListener = null;
}
},
getPositionClass() {
const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
const pos = positions.find(item => item === this.position);
return pos ? `p-dialog-${pos}` : '';
},
removeStylesFromMask() {
if (this.$refs.mask) {
this.dialogClasses = this.$vnode.data.class;
this.dialogStyles = this.$vnode.data.style;
DomHandler.removeClass(this.$refs.mask, this.$vnode.data.class);
if (this.$vnode.data.style) {
Object.keys(this.$vnode.data.style).forEach((key) => {
if (this.dialogStyles) {
Object.keys(this.dialogStyles).forEach((key) => {
this.$refs.mask.style[key] = '';
});
}
this.dialogClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
if (this.dialogClasses) {
this.$refs.mask.classList = 'p-dialog-mask' + (this.modal && ' p-component-overlay ') + this.getPositionClass();
}
}
}
},
@ -179,17 +213,24 @@ export default {
...this.$listeners
};
},
wrapperClass() {
return ['p-dialog-wrapper', {
'p-component-overlay p-dialog-mask p-fadein': this.modal
}];
maskClass() {
return ['p-dialog-mask', {
'p-component-overlay': this.modal,
}, this.getPositionClass()];
},
containerClass() {
dialogClass() {
return ['p-dialog p-component', {
'p-dialog-rtl': this.rtl
'p-dialog-rtl': this.rtl,
'p-dialog-maximized': this.maximizable && this.maximized
}, this.dialogClasses];
},
containerStyle() {
maximizeIconClass() {
return ['p-dialog-titlebar-maximize-icon pi', {
'pi-window-maximize': !this.maximized,
'pi-window-minimize': this.maximized
}];
},
dialogStyle() {
return this.dialogStyles;
},
ariaId() {
@ -202,7 +243,7 @@ export default {
}
</script>
<style>
.p-dialog-wrapper {
.p-dialog-mask {
position: fixed;
top: 0;
left: 0;
@ -213,21 +254,22 @@ export default {
align-items: center;
pointer-events: none;
}
.p-dialog-wrapper.p-dialog-mask {
.p-dialog-mask.p-component-overlay {
pointer-events: auto;
}
.p-dialog {
display: flex;
flex-direction: column;
padding: 0;
pointer-events: auto;
max-height: 90%;
margin: 5% auto;
overflow-y: auto;
transform: scale(1);
}
.p-dialog .p-dialog-titlebar {
padding: .5em .75em;
position: relative;
border: 0;
flex-shrink: 0;
}
.p-dialog .p-dialog-content {
position: relative;
@ -235,6 +277,7 @@ export default {
padding: .5em .75em;
background: none;
zoom: 1;
overflow-y: auto;
}
.p-dialog-resizable .p-dialog-content {
overflow: auto;
@ -275,6 +318,7 @@ export default {
.p-dialog-footer {
padding: 1em;
text-align: right;
flex-shrink: 0;
}
/* ConfirmDialog */
.p-confirmdialog {
@ -308,6 +352,7 @@ export default {
}
}
/* Animation */
/* Center */
.p-dialog-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
@ -319,6 +364,60 @@ export default {
opacity: 0;
transform: scale(0.7);
}
/* Top, Bottom, Left, Right, Top* and Bottom* */
.p-dialog-top .p-dialog,
.p-dialog-bottom .p-dialog,
.p-dialog-left .p-dialog,
.p-dialog-right .p-dialog,
.p-dialog-topleft .p-dialog,
.p-dialog-topright .p-dialog,
.p-dialog-bottomleft .p-dialog,
.p-dialog-bottomright .p-dialog {
margin: .75em;
transform: translate3d(0px, 0px, 0px);
}
.p-dialog-top .p-dialog-enter-active,
.p-dialog-top .p-dialog-leave-active,
.p-dialog-bottom .p-dialog-enter-active,
.p-dialog-bottom .p-dialog-leave-active,
.p-dialog-left .p-dialog-enter-active,
.p-dialog-left .p-dialog-leave-active,
.p-dialog-right .p-dialog-enter-active,
.p-dialog-right .p-dialog-leave-active,
.p-dialog-topleft .p-dialog-enter-active,
.p-dialog-topleft .p-dialog-leave-active,
.p-dialog-topright .p-dialog-enter-active,
.p-dialog-topright .p-dialog-leave-active,
.p-dialog-bottomleft .p-dialog-enter-active,
.p-dialog-bottomleft .p-dialog-leave-active,
.p-dialog-bottomright .p-dialog-enter-active,
.p-dialog-bottomright .p-dialog-leave-active {
transition: all .3s ease-out;
}
.p-dialog-top .p-dialog-enter,
.p-dialog-top .p-dialog-leave-to {
transform: translate3d(0px, -100%, 0px);
}
.p-dialog-bottom .p-dialog-enter,
.p-dialog-bottom .p-dialog-leave-to {
transform: translate3d(0px, 100%, 0px);
}
.p-dialog-left .p-dialog-enter,
.p-dialog-left .p-dialog-leave-to,
.p-dialog-topleft .p-dialog-enter,
.p-dialog-topleft .p-dialog-leave-to,
.p-dialog-bottomleft .p-dialog-enter,
.p-dialog-bottomleft .p-dialog-leave-to {
transform: translate3d(-100%, 0px, 0px);
}
.p-dialog-right .p-dialog-enter,
.p-dialog-right .p-dialog-leave-to,
.p-dialog-topright .p-dialog-enter,
.p-dialog-topright .p-dialog-leave-to,
.p-dialog-bottomright .p-dialog-enter,
.p-dialog-bottomright .p-dialog-leave-to {
transform: translate3d(100%, 0px, 0px);
}
/* Maximize */
.p-dialog-maximized {
-webkit-transition: none;
@ -326,10 +425,39 @@ export default {
transform: none;
width: 100vw !important;
max-height: 100%;
margin: auto;
height: 100%;
}
.p-dialog-maximized .p-dialog-content {
-webkit-transition: height .3s;
transition: height .3s;
flex-grow: 1;
}
/* Position */
.p-dialog-left {
justify-content: flex-start;
}
.p-dialog-right {
justify-content: flex-end;
}
.p-dialog-top {
align-items: flex-start;
}
.p-dialog-topleft {
justify-content: flex-start;
align-items: flex-start;
}
.p-dialog-topright {
justify-content: flex-end;
align-items: flex-start;
}
.p-dialog-bottom {
align-items: flex-end;
}
.p-dialog-bottomleft {
justify-content: flex-start;
align-items: flex-end;
}
.p-dialog-bottomright {
justify-content: flex-end;
align-items: flex-end;
}
</style>

1
src/components/menubar/Menubar.vue
View File

@ -49,6 +49,7 @@ export default {
padding: .25em;
position: relative;
text-decoration: none;
cursor: pointer;
}
.p-menubar .p-menuitem-icon {

9
src/components/menubar/MenubarSub.vue
View File

@ -3,13 +3,13 @@
<template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link"
<router-link v-if="item.to" :to="item.to" :class="getLinkClass(item)"
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
@ -240,6 +240,9 @@ export default {
}
]
},
getLinkClass(item) {
return ['p-menuitem-link', {'p-disabled': item.disabled}];
},
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = (event) => {

5
src/components/overlaypanel/OverlayPanel.vue
View File

@ -74,7 +74,10 @@ export default {
onEnter() {
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
if (this.dismissable) {
this.bindOutsideClickListener();
}
this.bindResizeListener();
if (this.autoZIndex) {

3
src/components/row/Row.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
import Vue from 'vue';
export declare class Row extends Vue {}

1
src/components/tieredmenu/TieredMenu.vue
View File

@ -189,6 +189,7 @@ export default {
display: block;
position: relative;
text-decoration: none;
cursor: pointer;
}
.p-tieredmenu .p-menuitem-icon {

9
src/components/tieredmenu/TieredMenuSub.vue
View File

@ -3,13 +3,13 @@
<template v-for="(item, i) of model">
<li :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)" role="none">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link"
<router-link v-if="item.to" :to="item.to" :class="getLinkClass(item)"
@click.native="onItemClick($event, item)" @keydown.native="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
@ -191,6 +191,9 @@ export default {
}
]
},
getLinkClass(item) {
return ['p-menuitem-link', {'p-disabled': item.disabled}];
},
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = (event) => {

4
src/views/Home.vue
View File

@ -1,6 +1,8 @@
<template>
<div class="home">
<div class="introduction">
<span class="introduction-promo"><img alt="Gold Sponsor" src="../assets/images/home/vue-gold.png" />
<span>Vue.js Gold Sponsor</span></span>
<h1>The Most Complete UI Framework</h1>
<h2>for VUE</h2>
@ -196,7 +198,7 @@ export default {
expire.setTime(today.getTime() + 3600000*24*7);
document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
}
}
}
</script>

26
src/views/datatable/DataTableDoc.vue
View File

@ -708,13 +708,13 @@ export default {
</CodeHighlight>
<h3>Lazy Loading</h3>
<p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates lazy paging by using an in memory list.
<p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks such as paging and sorting. Sample belows imitates lazy paging by using an in memory list.
It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI
assuming there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</p>
<p>Lazy loading is implemented by handling pagination and sorting using <i>page</i> and <i>sort</i> events by making a remote query using the information
passed to the events such as first offset, number of rows and sort field for ordering. Filtering is handled differently as filter elements are defined using templates, use
the event you prefer on your form elements such as input, change, blur to make a remote call by passing the filters property to update the displayed data. Note that,
passed to the events such as first offset, number of rows and sort field for ordering. Filtering is handled differently as filter elements are defined using templates. <i>filter</i> event is not triggered in
lazy mode instead use the event you prefer on your form elements such as input, change, blur to make a remote call by passing the filters property to update the displayed data. Note that,
in lazy filtering, totalRecords should also be updated to align the data with the paginator.</p>
<p>Here is a sample paging implementation with in memory data, a more enhanced example with a backend is being worked on and will be available at a github repository.</p>
@ -1970,45 +1970,45 @@ export default {
<tbody>
<tr>
<td>page</td>
<td>event.page: New page number <br/>
<td>event.originalEvent: Browser event <br >
event.page: New page number <br/>
event.pageCount: Total page count <br/>
event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <br/>
event.pageCount: Total number of pages <br />
event.sortField: Field to sort against <br />
event.sortOrder: Sort order as integer <br />
event.multiSortMeta: MultiSort metadata <br />
event.filters: Collection of active filters <br />
event.filteredValue: Filtered collection
event.filterMatchModes: Match modes per field
</td>
<td>Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.</td>
</tr>
<tr>
<td>sort</td>
<td>event.page: New page number <br/>
<td>event.originalEvent: Browser event <br >
event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <br/>
event.pageCount: Total number of pages <br />
event.sortField: Field to sort against <br />
event.sortOrder: Sort order as integer <br />
event.multiSortMeta: MultiSort metadata <br />
event.filters: Collection of active filters <br />
event.filteredValue: Filtered collection
event.filterMatchModes: Match modes per field
</td>
<td>Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.</td>
</tr>
<tr>
<td>filter</td>
<td>event.page: New page number <br/>
<td>event.originalEvent: Browser event <br >
event.first: Index of first record <br/>
event.rows: Number of rows to display in new page <br/>
event.pageCount: Total number of pages <br />
event.sortField: Field to sort against <br />
event.sortOrder: Sort order as integer <br />
event.multiSortMeta: MultiSort metadata <br />
event.filters: Collection of active filters <br />
event.filteredValue: Filtered collection
event.filteredValue: Filtered collection <br />
event.filterMatchModes: Match modes per field
</td>
<td>Callback to invoke on filtering. Page and Sort information is also available for lazy loading implementation.</td>
<td>Event to emit after filtering, not triggered in lazy mode.</td>
</tr>
<tr>
<td>row-click</td>

4
src/views/datatable/DataTableFilterDemo.vue
View File

@ -13,7 +13,7 @@
<DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
<i class="pi pi-search" style="margin: 4px 4px 0 0"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
</div>
</template>
@ -58,7 +58,7 @@
&lt;DataTable :value="cars" :filters="filters" :paginator="true" :rows="10"&gt;
&lt;template #header&gt;
&lt;div style="text-align: right"&gt;
&lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
&lt;i class="pi pi-search" style="margin: 4px 4px 0 0"&gt;&lt;/i&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
&lt;/div&gt;
&lt;/template&gt;

137
src/views/dialog/DialogDemo.vue
View File

@ -8,15 +8,91 @@
</div>
<div class="content-section implementation">
<Button label="Show" icon="pi pi-external-link" @click="open" />
<Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true">
<h3>Basic</h3>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}">
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.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="close" />
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
<Button label="Yes" icon="pi pi-check" @click="closeBasic" />
<Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/>
</template>
</Dialog>
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
<Dialog header="Godfather Casting" :visible.sync="displayBasic2" :style="{width: '50vw'}">
Puzo was first to show interest in having Marlon Brando portray Don Vito Corleone by sending a letter to Brando in which he stated Brando was the "only actor who can play the Godfather." Despite Puzo's wishes, the executives at Paramount were against having Brando, partly due to the poor performance of his recent films and also his short temper. Coppola favored Brando or Laurence Olivier for the role, but Olivier's agent refused the role claiming Olivier was sick; however, Olivier went on to star in Sleuth later that year. The studio mainly pushed for Ernest Borgnine to receive the part. Other considerations were George C. Scott, Richard Conte, Anthony Quinn, and Orson Welles.
<br><br>
After months of debate between Coppola and Paramount over Brando, the two finalists for the role were Borgnine and Brando, the latter of whom Paramount president Stanley Jaffe required to perform a screen test. Coppola did not want to offend Brando and stated that he needed to test equipment in order to set up the screen test at Brando's California residence. For make-up, Brando stuck cotton balls in his cheeks, put shoe polish in his hair to darken it, and rolled his collar. Coppola placed Brando's audition tape in the middle of the videos of the audition tapes as the Paramount executives watched them. The executives were impressed with Brando's efforts and allowed Coppola to cast Brando for the role if Brando accepted a lower salary and put up a bond to ensure he would not cause any delays in production. Brando earned $1.6 million from a net participation deal.
<br><br>
From the start of production, Coppola wanted Robert Duvall to play the part of Tom Hagen. After screen testing several other actors, Coppola eventually got his wish and Duvall was awarded the part of Tom Hagen. Al Martino, a then famed singer in nightclubs, was notified of the character Johnny Fontane by a friend who read the eponymous novel and felt Martino represented the character of Johnny Fontane. Martino then contacted producer Albert S. Ruddy, who gave him the part. However, Martino was stripped of the part after Coppola became director and then awarded the role to singer Vic Damone. According to Martino, after being stripped of the role, he went to Russell Bufalino, his godfather and a crime boss, who then orchestrated the publication of various news articles that claimed Coppola was unaware of Ruddy giving Martino the part. Damone eventually dropped the role because he did not want to provoke the mob, in addition to being paid too little. Ultimately, the part of Johnny Fontane was given to Martino.
<br><br>
Robert De Niro originally was given the part of Paulie Gatto. A spot in The Gang That Couldn't Shoot Straight opened up after Al Pacino quit the project in favor of The Godfather, which led De Niro to audition for the role and leave The Godfather after receiving the part. After De Niro quit, Johnny Martino was given the role of Gatto. Coppola cast Diane Keaton for the role of Kay Adams due to her reputation for being eccentric. John Cazale was given the part of Fredo Corleone after Coppola saw him perform in an Off Broadway production. Gianni Russo was given the role of Carlo Rizzi after he was asked to perform a screen test in which he acted out the fight between Rizzi and Connie.
<br><br>
Nearing the start of filming on March 29, Michael Corleone had yet to be cast. Paramount executives wanted a popular actor, either Warren Beatty or Robert Redford. Producer Robert Evans wanted Ryan O'Neal to receive the role in part due to his recent success in Love Story. Pacino was Coppola's favorite for the role as he could picture him roaming the Sicilian countryside, and wanted an unknown actor who looked like an Italian-American. However, Paramount executives found Pacino to be too short to play Michael. Dustin Hoffman, Martin Sheen, and James Caan also auditioned. Caan was well received by the Paramount executives and was given the part of Michael initially, while the role of Sonny Corleone was awarded to Carmine Caridi. Coppola still pushed for Pacino to play Michael after the fact and Evans eventually conceded, allowing Pacino to have the role of Michael as long as Caan played Sonny. Evans preferred Caan over Caridi because Caan was seven inches shorter than Caridi, which was much closer to Pacino's height. Despite agreeing to play Michael Corleone, Pacino was contracted to star in MGM's The Gang That Couldn't Shoot Straight, but the two studios agreed on a settlement and Pacino was signed by Paramount three weeks before shooting began.
<br><br>
Coppola gave several roles in the film to family members. He gave his sister, Talia Shire, the role of Connie Corleone. His daughter Sofia played Michael Francis Rizzi, Connie's and Carlo's newborn son. Carmine Coppola, his father, appeared in the film as an extra playing a piano during a scene. Coppola's wife, mother, and two sons all appeared as extras in the picture. Several smaller roles, like Luca Brasi, were cast after the filming had started.
<br><br>
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeBasic2" />
<Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/>
</template>
</Dialog>
<h3>Modal</h3>
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
<Dialog header="Godfather I" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true">
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.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeModal" />
<Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
</template>
</Dialog>
<h3>Maximizable</h3>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Godfather I" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
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.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeMaximizable" />
<Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/>
</template>
</Dialog>
<h3>Position</h3>
<div class="p-grid p-dir-col">
<div class="p-col">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
<Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
<Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
</div>
<div class="p-col">
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
<Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
<Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
</div>
</div>
<Dialog header="Godfather I" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
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.
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closePosition" />
<Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-secondary"/>
</template>
</Dialog>
</div>
@ -31,19 +107,60 @@ import DialogDoc from './DialogDoc';
export default {
data() {
return {
display: false
displayBasic: false,
displayBasic2: false,
displayModal: false,
displayMaximizable: false,
displayPosition: false,
position: 'center'
}
},
methods: {
open() {
this.display = true;
openBasic() {
this.displayBasic = true;
},
close() {
this.display = false;
closeBasic() {
this.displayBasic = false;
},
openBasic2() {
this.displayBasic2 = true;
},
closeBasic2() {
this.displayBasic2 = false;
},
openModal() {
this.displayModal = true;
},
closeModal() {
this.displayModal = false;
},
openMaximizable() {
this.displayMaximizable = true;
},
closeMaximizable() {
this.displayMaximizable = false;
},
openPosition(position) {
this.position = position;
this.displayPosition = true;
},
closePosition() {
this.displayPosition = false;
}
},
components: {
'DialogDoc': DialogDoc
}
}
</script>
</script>
<style scoped lang="scss">
.p-button {
margin: .5em .5em .5em 0;
width: 140px;
}
/deep/ .p-dialog-content {
line-height: 1.5;
}
</style>

193
src/views/dialog/DialogDoc.vue
View File

@ -50,8 +50,13 @@ export default {
&lt;/Dialog&gt;
</CodeHighlight>
<h3>Dynamic Content</h3>
<p>Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via <i>contentStyle</i> so longer content displays a scrollbar.</p>
<h3>Positioning</h3>
<p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright"<div class=""></div>
<CodeHighlight>
&lt;Dialog position="top" :visible.sync="display"&gt;
Content
&lt;/Dialog&gt;
</CodeHighlight>
<h3>Properties</h3>
<div class="doc-tablewrapper">
@ -89,6 +94,12 @@ export default {
<td>null</td>
<td>Defines if background should be blocked when dialog is displayed.</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>center</td>
<td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
</tr>
<tr>
<td>contentStyle</td>
<td>object</td>
@ -130,6 +141,12 @@ export default {
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
<tr>
<td>maximizable</td>
<td>boolean</td>
<td>false</td>
<td>Whether the dialog can be displayed full screen.</td>
</tr>
</tbody>
</table>
@ -209,15 +226,91 @@ export default {
</a>
<CodeHighlight>
<template v-pre>
&lt;Button label="Show" icon="pi pi-external-link" @click="open" /&gt;
&lt;Dialog header="Godfather I" :visible.sync="display" :style="{width: '50vw'}" :modal="true"&gt;
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openBasic" /&gt;
&lt;Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}"&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.
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;template #footer&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="close" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closeBasic" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" /&gt;
&lt;Dialog header="Godfather Casting" :visible.sync="displayBasic2" :style="{width: '50vw'}"&gt;
Puzo was first to show interest in having Marlon Brando portray Don Vito Corleone by sending a letter to Brando in which he stated Brando was the "only actor who can play the Godfather." Despite Puzo's wishes, the executives at Paramount were against having Brando, partly due to the poor performance of his recent films and also his short temper. Coppola favored Brando or Laurence Olivier for the role, but Olivier's agent refused the role claiming Olivier was sick; however, Olivier went on to star in Sleuth later that year. The studio mainly pushed for Ernest Borgnine to receive the part. Other considerations were George C. Scott, Richard Conte, Anthony Quinn, and Orson Welles.
&lt;br&gt;&lt;br&gt;
After months of debate between Coppola and Paramount over Brando, the two finalists for the role were Borgnine and Brando, the latter of whom Paramount president Stanley Jaffe required to perform a screen test. Coppola did not want to offend Brando and stated that he needed to test equipment in order to set up the screen test at Brando's California residence. For make-up, Brando stuck cotton balls in his cheeks, put shoe polish in his hair to darken it, and rolled his collar. Coppola placed Brando's audition tape in the middle of the videos of the audition tapes as the Paramount executives watched them. The executives were impressed with Brando's efforts and allowed Coppola to cast Brando for the role if Brando accepted a lower salary and put up a bond to ensure he would not cause any delays in production. Brando earned $1.6 million from a net participation deal.
&lt;br&gt;&lt;br&gt;
From the start of production, Coppola wanted Robert Duvall to play the part of Tom Hagen. After screen testing several other actors, Coppola eventually got his wish and Duvall was awarded the part of Tom Hagen. Al Martino, a then famed singer in nightclubs, was notified of the character Johnny Fontane by a friend who read the eponymous novel and felt Martino represented the character of Johnny Fontane. Martino then contacted producer Albert S. Ruddy, who gave him the part. However, Martino was stripped of the part after Coppola became director and then awarded the role to singer Vic Damone. According to Martino, after being stripped of the role, he went to Russell Bufalino, his godfather and a crime boss, who then orchestrated the publication of various news articles that claimed Coppola was unaware of Ruddy giving Martino the part. Damone eventually dropped the role because he did not want to provoke the mob, in addition to being paid too little. Ultimately, the part of Johnny Fontane was given to Martino.
&lt;br&gt;&lt;br&gt;
Robert De Niro originally was given the part of Paulie Gatto. A spot in The Gang That Couldn't Shoot Straight opened up after Al Pacino quit the project in favor of The Godfather, which led De Niro to audition for the role and leave The Godfather after receiving the part. After De Niro quit, Johnny Martino was given the role of Gatto. Coppola cast Diane Keaton for the role of Kay Adams due to her reputation for being eccentric. John Cazale was given the part of Fredo Corleone after Coppola saw him perform in an Off Broadway production. Gianni Russo was given the role of Carlo Rizzi after he was asked to perform a screen test in which he acted out the fight between Rizzi and Connie.
&lt;br&gt;&lt;br&gt;
Nearing the start of filming on March 29, Michael Corleone had yet to be cast. Paramount executives wanted a popular actor, either Warren Beatty or Robert Redford. Producer Robert Evans wanted Ryan O'Neal to receive the role in part due to his recent success in Love Story. Pacino was Coppola's favorite for the role as he could picture him roaming the Sicilian countryside, and wanted an unknown actor who looked like an Italian-American. However, Paramount executives found Pacino to be too short to play Michael. Dustin Hoffman, Martin Sheen, and James Caan also auditioned. Caan was well received by the Paramount executives and was given the part of Michael initially, while the role of Sonny Corleone was awarded to Carmine Caridi. Coppola still pushed for Pacino to play Michael after the fact and Evans eventually conceded, allowing Pacino to have the role of Michael as long as Caan played Sonny. Evans preferred Caan over Caridi because Caan was seven inches shorter than Caridi, which was much closer to Pacino's height. Despite agreeing to play Michael Corleone, Pacino was contracted to star in MGM's The Gang That Couldn't Shoot Straight, but the two studios agreed on a settlement and Pacino was signed by Paramount three weeks before shooting began.
&lt;br&gt;&lt;br&gt;
Coppola gave several roles in the film to family members. He gave his sister, Talia Shire, the role of Connie Corleone. His daughter Sofia played Michael Francis Rizzi, Connie's and Carlo's newborn son. Carmine Coppola, his father, appeared in the film as an extra playing a piano during a scene. Coppola's wife, mother, and two sons all appeared as extras in the picture. Several smaller roles, like Luca Brasi, were cast after the filming had started.
&lt;br&gt;&lt;br&gt;
&lt;template #footer&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closeBasic2" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;h3&gt;Modal&lt;/h3&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openModal" /&gt;
&lt;Dialog header="Godfather I" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true"&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;template #footer&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closeModal" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;h3&gt;Maximizable&lt;/h3&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /&gt;
&lt;Dialog header="Godfather I" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"&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;template #footer&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closeMaximizable" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;h3&gt;Position&lt;/h3&gt;
&lt;div class="p-grid p-dir-col"&gt;
&lt;div class="p-col"&gt;
&lt;Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning"/&gt;
&lt;Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning"/&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" /&gt;
&lt;Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" /&gt;
&lt;Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" /&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" /&gt;
&lt;Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" /&gt;
&lt;Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;Dialog header="Godfather I" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"&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;template #footer&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closePosition" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-secondary"/&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
</template>
@ -225,22 +318,76 @@ export default {
<CodeHighlight lang="javascript">
export default {
data() {
return {
display: false
}
},
methods: {
open() {
this.display = true;
},
close() {
this.display = false;
}
}
data() {
return {
displayBasic: false,
displayBasic2: false,
displayModal: false,
displayMaximizable: false,
displayPosition: false,
position: 'center'
}
},
methods: {
openBasic() {
this.displayBasic = true;
},
closeBasic() {
this.displayBasic = false;
},
openBasic2() {
this.displayBasic2 = true;
},
closeBasic2() {
this.displayBasic2 = false;
},
openModal() {
this.displayModal = true;
},
closeModal() {
this.displayModal = false;
},
openMaximizable() {
this.displayMaximizable = true;
},
closeMaximizable() {
this.displayMaximizable = false;
},
openPosition(position) {
this.position = position;
this.displayPosition = true;
},
closePosition() {
this.displayPosition = false;
}
},
components: {
'DialogDoc': DialogDoc
}
}
</CodeHighlight>
<CodeHighlight lang="css">
//CSS
body .p-button-dark {
background-color: #455b70;
border-color: #455b70;
}
body .p-button-dark:enabled:hover {
background-color: #364758;
}
body .p-button-dark:enabled:focus {
box-shadow: 0 0 0 0.2em #95a9bd;
}
body .{
margin: .5em .5em .5em 0;
width: 140px;
}
body .p-dialog .p-dialog-content {
line-height: 1.5;
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>
</template>