Migrated Dialog to V3
parent
ecfd5f8501
commit
bf9f2cebaa
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="mask" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
|
<div :ref="maskRef" :class="maskClass" v-if="visible" @click="onMaskClick">
|
||||||
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @appear="onAppear">
|
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
|
||||||
<div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
|
<div :ref="containerRef" :class="dialogClass" v-if="containerVisible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
|
||||||
<div class="p-dialog-header" v-if="showHeader">
|
<div class="p-dialog-header" v-if="showHeader">
|
||||||
<slot name="header">
|
<slot name="header">
|
||||||
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header">{{header}}</span>
|
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header">{{header}}</span>
|
||||||
|
@ -72,33 +72,22 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dialogClasses: null,
|
containerVisible: this.visible,
|
||||||
dialogStyles: null,
|
|
||||||
maskVisible: this.visible,
|
|
||||||
maximized: false
|
maximized: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
documentKeydownListener: null,
|
documentKeydownListener: null,
|
||||||
|
container: null,
|
||||||
|
mask: null,
|
||||||
updated() {
|
updated() {
|
||||||
this.removeStylesFromMask();
|
this.containerVisible = this.visible;
|
||||||
|
|
||||||
if (this.visible && !this.maskVisible) {
|
|
||||||
this.maskVisible = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.modal && this.$refs.mask && !DomHandler.hasClass(this.$refs.mask, 'p-component-overlay')) {
|
|
||||||
DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.removeStylesFromMask();
|
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
this.disableDocumentSettings();
|
this.unbindDocumentState();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
close() {
|
close() {
|
||||||
this.$emit('update:visible', false);
|
this.containerVisible = false;
|
||||||
},
|
},
|
||||||
onBeforeEnter(el) {
|
onBeforeEnter(el) {
|
||||||
if (this.autoZIndex) {
|
if (this.autoZIndex) {
|
||||||
|
@ -106,26 +95,21 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onEnter() {
|
onEnter() {
|
||||||
this.$refs.mask.style.zIndex = String(parseInt(this.$refs.dialog.style.zIndex, 10) - 1);
|
this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
|
||||||
|
|
||||||
this.$emit('show');
|
this.$emit('show');
|
||||||
this.focus();
|
this.focus();
|
||||||
this.enableDocumentSettings();
|
this.enableDocumentSettings();
|
||||||
},
|
},
|
||||||
onBeforeLeave() {
|
onBeforeLeave() {
|
||||||
DomHandler.addClass(this.$refs.mask, 'p-dialog-mask-leave');
|
DomHandler.addClass(this.mask, 'p-dialog-mask-leave');
|
||||||
},
|
},
|
||||||
onLeave() {
|
onLeave() {
|
||||||
this.$emit('hide');
|
this.$emit('hide');
|
||||||
},
|
},
|
||||||
onAfterLeave() {
|
onAfterLeave() {
|
||||||
this.maskVisible = false;
|
this.$emit('update:visible', false);
|
||||||
this.disableDocumentSettings();
|
this.unbindDocumentState();
|
||||||
},
|
|
||||||
onAppear() {
|
|
||||||
if (this.visible) {
|
|
||||||
this.onEnter();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
onMaskClick() {
|
onMaskClick() {
|
||||||
if (this.modal && this.closable && this.dismissableMask) {
|
if (this.modal && this.closable && this.dismissableMask) {
|
||||||
|
@ -133,7 +117,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
focus() {
|
focus() {
|
||||||
let focusTarget = this.$refs.dialog.querySelector('[autofocus]');
|
let focusTarget = this.container.querySelector('[autofocus]');
|
||||||
if (focusTarget) {
|
if (focusTarget) {
|
||||||
focusTarget.focus();
|
focusTarget.focus();
|
||||||
}
|
}
|
||||||
|
@ -157,7 +141,7 @@ export default {
|
||||||
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
disableDocumentSettings() {
|
unbindDocumentState() {
|
||||||
if (this.modal) {
|
if (this.modal) {
|
||||||
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
||||||
this.unbindDocumentKeydownListener();
|
this.unbindDocumentKeydownListener();
|
||||||
|
@ -169,7 +153,7 @@ export default {
|
||||||
onKeyDown(event) {
|
onKeyDown(event) {
|
||||||
if (event.which === 9) {
|
if (event.which === 9) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
let focusableElements = DomHandler.getFocusableElements(this.$refs.dialog);
|
let focusableElements = DomHandler.getFocusableElements(this.container);
|
||||||
if (focusableElements && focusableElements.length > 0) {
|
if (focusableElements && focusableElements.length > 0) {
|
||||||
if (!document.activeElement) {
|
if (!document.activeElement) {
|
||||||
focusableElements[0].focus();
|
focusableElements[0].focus();
|
||||||
|
@ -212,31 +196,22 @@ export default {
|
||||||
|
|
||||||
return pos ? `p-dialog-${pos}` : '';
|
return pos ? `p-dialog-${pos}` : '';
|
||||||
},
|
},
|
||||||
removeStylesFromMask() {
|
containerRef(el) {
|
||||||
if (this.$refs.mask) {
|
this.container = el;
|
||||||
this.dialogStyles = this.$vnode.data.style;
|
},
|
||||||
if (this.dialogStyles) {
|
maskRef(el) {
|
||||||
Object.keys(this.dialogStyles).forEach((key) => {
|
this.mask = el;
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
maskClass() {
|
maskClass() {
|
||||||
return ['p-dialog-mask', this.getPositionClass()];
|
return ['p-dialog-mask', {'p-component-overlay': this.modal}, this.getPositionClass()];
|
||||||
},
|
},
|
||||||
dialogClass() {
|
dialogClass() {
|
||||||
return ['p-dialog p-component', {
|
return ['p-dialog p-component', {
|
||||||
'p-dialog-rtl': this.rtl,
|
'p-dialog-rtl': this.rtl,
|
||||||
'p-dialog-maximized': this.maximizable && this.maximized
|
'p-dialog-maximized': this.maximizable && this.maximized
|
||||||
}, this.dialogClasses];
|
}];
|
||||||
},
|
},
|
||||||
maximizeIconClass() {
|
maximizeIconClass() {
|
||||||
return ['p-dialog-header-maximize-icon pi', {
|
return ['p-dialog-header-maximize-icon pi', {
|
||||||
|
@ -244,9 +219,6 @@ export default {
|
||||||
'pi-window-minimize': this.maximized
|
'pi-window-minimize': this.maximized
|
||||||
}];
|
}];
|
||||||
},
|
},
|
||||||
dialogStyle() {
|
|
||||||
return this.dialogStyles;
|
|
||||||
},
|
|
||||||
ariaId() {
|
ariaId() {
|
||||||
return UniqueComponentId();
|
return UniqueComponentId();
|
||||||
},
|
},
|
||||||
|
@ -327,7 +299,7 @@ export default {
|
||||||
.p-dialog-leave-active {
|
.p-dialog-leave-active {
|
||||||
transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.p-dialog-enter,
|
.p-dialog-enter-from,
|
||||||
.p-dialog-leave-to {
|
.p-dialog-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0.7);
|
transform: scale(0.7);
|
||||||
|
@ -367,27 +339,27 @@ export default {
|
||||||
.p-dialog-bottomright .p-dialog-leave-active {
|
.p-dialog-bottomright .p-dialog-leave-active {
|
||||||
transition: all .3s ease-out;
|
transition: all .3s ease-out;
|
||||||
}
|
}
|
||||||
.p-dialog-top .p-dialog-enter,
|
.p-dialog-top .p-dialog-enter-from,
|
||||||
.p-dialog-top .p-dialog-leave-to {
|
.p-dialog-top .p-dialog-leave-to {
|
||||||
transform: translate3d(0px, -100%, 0px);
|
transform: translate3d(0px, -100%, 0px);
|
||||||
}
|
}
|
||||||
.p-dialog-bottom .p-dialog-enter,
|
.p-dialog-bottom .p-dialog-enter-from,
|
||||||
.p-dialog-bottom .p-dialog-leave-to {
|
.p-dialog-bottom .p-dialog-leave-to {
|
||||||
transform: translate3d(0px, 100%, 0px);
|
transform: translate3d(0px, 100%, 0px);
|
||||||
}
|
}
|
||||||
.p-dialog-left .p-dialog-enter,
|
.p-dialog-left .p-dialog-enter-from,
|
||||||
.p-dialog-left .p-dialog-leave-to,
|
.p-dialog-left .p-dialog-leave-to,
|
||||||
.p-dialog-topleft .p-dialog-enter,
|
.p-dialog-topleft .p-dialog-enter-from,
|
||||||
.p-dialog-topleft .p-dialog-leave-to,
|
.p-dialog-topleft .p-dialog-leave-to,
|
||||||
.p-dialog-bottomleft .p-dialog-enter,
|
.p-dialog-bottomleft .p-dialog-enter-from,
|
||||||
.p-dialog-bottomleft .p-dialog-leave-to {
|
.p-dialog-bottomleft .p-dialog-leave-to {
|
||||||
transform: translate3d(-100%, 0px, 0px);
|
transform: translate3d(-100%, 0px, 0px);
|
||||||
}
|
}
|
||||||
.p-dialog-right .p-dialog-enter,
|
.p-dialog-right .p-dialog-enter-from,
|
||||||
.p-dialog-right .p-dialog-leave-to,
|
.p-dialog-right .p-dialog-leave-to,
|
||||||
.p-dialog-topright .p-dialog-enter,
|
.p-dialog-topright .p-dialog-enter-from,
|
||||||
.p-dialog-topright .p-dialog-leave-to,
|
.p-dialog-topright .p-dialog-leave-to,
|
||||||
.p-dialog-bottomright .p-dialog-enter,
|
.p-dialog-bottomright .p-dialog-enter-from,
|
||||||
.p-dialog-bottomright .p-dialog-leave-to {
|
.p-dialog-bottomright .p-dialog-leave-to {
|
||||||
transform: translate3d(100%, 0px, 0px);
|
transform: translate3d(100%, 0px, 0px);
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,9 +8,9 @@ import Dialog from 'primevue/dialog';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h5>Getting Started</h5>
|
<h5>Getting Started</h5>
|
||||||
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the sync operator for two-way binding.</p>
|
<p>Dialog is used as a container and visibility is managed with <i>visible</i> property that requires the v-model for two-way binding.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dialog header="Header" :visible.sync="display" >
|
<Dialog header="Header" v-model:visible="display" >
|
||||||
Content
|
Content
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
@ -28,13 +28,13 @@ export default {
|
||||||
<h5>Header and Footer</h5>
|
<h5>Header and Footer</h5>
|
||||||
<p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
|
<p>Header and Footer sections are defined using properties with the same name that accept simple strings or with the <i>header</i> and <i>footer</i> templates for custom content.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dialog header="Header" footer="Footer" :visible.sync="display">
|
<Dialog header="Header" footer="Footer" v-model:visible="display">
|
||||||
Content
|
Content
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dialog :visible.sync="display">
|
<Dialog v-model:visible="display">
|
||||||
<template #header>
|
<template #header>
|
||||||
<h3>Header</h3>
|
<h3>Header</h3>
|
||||||
</template>
|
</template>
|
||||||
|
@ -51,7 +51,7 @@ export default {
|
||||||
<h5>Positioning</h5>
|
<h5>Positioning</h5>
|
||||||
<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".</p>
|
<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".</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dialog position="top" :visible.sync="display">
|
<Dialog position="top" v-model:visible="display">
|
||||||
Content
|
Content
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
@ -59,7 +59,7 @@ export default {
|
||||||
<h5>Popup Content inside the Dialog</h5>
|
<h5>Popup Content inside the Dialog</h5>
|
||||||
<p>If the dialog contains components with popup elements such as Dropdown or Calendar, set <i>contentStyle</i> to overflow:visible so that overlays can be displayed outside of the content area.</p>
|
<p>If the dialog contains components with popup elements such as Dropdown or Calendar, set <i>contentStyle</i> to overflow:visible so that overlays can be displayed outside of the content area.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dialog :visible.sync="display" :contentStyle="{overflow: 'visible'}">
|
<Dialog v-model:visible="display" :contentStyle="{overflow: 'visible'}">
|
||||||
Content
|
Content
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
@ -67,7 +67,7 @@ export default {
|
||||||
<h5>Initial Focus</h5>
|
<h5>Initial Focus</h5>
|
||||||
<p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
|
<p>Adding <i>autofocus</i> to an element in the dialog makes it the initial focus target when dialog gets shown.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Dialog :visible.sync="display">
|
<Dialog v-model:visible="display">
|
||||||
Content
|
Content
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<Button label="No" />
|
<Button label="No" />
|
||||||
|
@ -258,10 +258,11 @@ export default {
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<h5>Basic</h5>
|
<h5>Basic</h5>
|
||||||
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
|
<Button label="Show" icon="pi pi-external-link" @click="openBasic" />
|
||||||
<Dialog header="Header " :visible.sync="displayBasic" :style="{width: '50vw'}">
|
<Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}">
|
||||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-text"/>
|
<Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-text"/>
|
||||||
<Button label="Yes" icon="pi pi-check" @click="closeBasic" autofocus />
|
<Button label="Yes" icon="pi pi-check" @click="closeBasic" autofocus />
|
||||||
|
@ -269,7 +270,7 @@ export default {
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
|
<Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" />
|
||||||
<Dialog header="Header" :visible.sync="displayBasic2" :style="{width: '50vw'}">
|
<Dialog header="Header" v-model:visible="displayBasic2" :style="{width: '50vw'}">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
||||||
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||||
culpa qui officia deserunt mollit anim id est laborum.</p>
|
culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
@ -292,7 +293,7 @@ export default {
|
||||||
|
|
||||||
<h5>Modal</h5>
|
<h5>Modal</h5>
|
||||||
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
|
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
|
||||||
<Dialog header="Header" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true">
|
<Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
|
||||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
@ -304,7 +305,7 @@ export default {
|
||||||
|
|
||||||
<h5>Confirmation</h5>
|
<h5>Confirmation</h5>
|
||||||
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
|
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
|
||||||
<Dialog header="Confirmation" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true">
|
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
|
||||||
<div class="confirmation-content">
|
<div class="confirmation-content">
|
||||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||||
<span>Are you sure you want to proceed?</span>
|
<span>Are you sure you want to proceed?</span>
|
||||||
|
@ -317,7 +318,7 @@ export default {
|
||||||
|
|
||||||
<h5>Maximizable</h5>
|
<h5>Maximizable</h5>
|
||||||
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
|
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
|
||||||
<Dialog header="Header" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
|
<Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
|
||||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
@ -345,7 +346,7 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Dialog header="Header" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
|
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
|
||||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
@ -408,6 +409,9 @@ export default {
|
||||||
closePosition() {
|
closePosition() {
|
||||||
this.displayPosition = false;
|
this.displayPosition = false;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'DialogDoc': DialogDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
@ -427,6 +431,10 @@ p {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-dialog .p-button {
|
||||||
|
min-width: 6rem;
|
||||||
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
</TabView>
|
</TabView>
|
||||||
|
|
Loading…
Reference in New Issue