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

Migrated Dialog to V3

pull/496/head
Cagatay Civici 2020-09-22 17:55:01 +03:00
parent ecfd5f8501
commit bf9f2cebaa
2 changed files with 58 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<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>
</slot> </slot>
<div class="p-dialog-header-icons"> <div class="p-dialog-header-icons">
<button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1" v-ripple> <button class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" v-if="maximizable" type="button" tabindex="-1" v-ripple>
@ -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);
} }

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

@ -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>
&lt;Dialog header="Header" :visible.sync="display" &gt; &lt;Dialog header="Header" v-model:visible="display" &gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</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>
&lt;Dialog header="Header" footer="Footer" :visible.sync="display"&gt; &lt;Dialog header="Header" footer="Footer" v-model:visible="display"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</CodeHighlight> </CodeHighlight>
<CodeHighlight> <CodeHighlight>
&lt;Dialog :visible.sync="display"&gt; &lt;Dialog v-model:visible="display"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;h3&gt;Header&lt;/h3&gt; &lt;h3&gt;Header&lt;/h3&gt;
&lt;/template&gt; &lt;/template&gt;
@ -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>
&lt;Dialog position="top" :visible.sync="display"&gt; &lt;Dialog position="top" v-model:visible="display"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</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>
&lt;Dialog :visible.sync="display" :contentStyle="{overflow: 'visible'}"&gt; &lt;Dialog v-model:visible="display" :contentStyle="{overflow: 'visible'}"&gt;
Content Content
&lt;/Dialog&gt; &lt;/Dialog&gt;
</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>
&lt;Dialog :visible.sync="display"&gt; &lt;Dialog v-model:visible="display"&gt;
Content Content
&lt;template #footer&gt; &lt;template #footer&gt;
&lt;Button label="No" /&gt; &lt;Button label="No" /&gt;
@ -258,10 +258,11 @@ export default {
<template v-pre> <template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openBasic" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="openBasic" /&gt;
&lt;Dialog header="Header " :visible.sync="displayBasic" :style="{width: '50vw'}"&gt; &lt;Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}"&gt;
&lt;p class="p-m-0"&gt;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 &lt;p&gt;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.&lt;/p&gt; 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.&lt;/p&gt;
&lt;template #footer&gt; &lt;template #footer&gt;
&lt;Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-text"/&gt; &lt;Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-text"/&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closeBasic" autofocus /&gt; &lt;Button label="Yes" icon="pi pi-check" @click="closeBasic" autofocus /&gt;
@ -269,7 +270,7 @@ export default {
&lt;/Dialog&gt; &lt;/Dialog&gt;
&lt;Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" /&gt; &lt;Button label="Long Content" icon="pi pi-external-link" @click="openBasic2" /&gt;
&lt;Dialog header="Header" :visible.sync="displayBasic2" :style="{width: '50vw'}"&gt; &lt;Dialog header="Header" v-model:visible="displayBasic2" :style="{width: '50vw'}"&gt;
&lt;p&gt;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 &lt;p&gt;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.&lt;/p&gt; culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
@ -292,7 +293,7 @@ export default {
&lt;h5&gt;Modal&lt;/h5&gt; &lt;h5&gt;Modal&lt;/h5&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openModal" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="openModal" /&gt;
&lt;Dialog header="Header" :visible.sync="displayModal" :style="{width: '50vw'}" :modal="true"&gt; &lt;Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true"&gt;
&lt;p class="p-m-0"&gt;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 &lt;p class="p-m-0"&gt;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.&lt;/p&gt; Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
@ -304,7 +305,7 @@ export default {
&lt;h5&gt;Confirmation&lt;/h5&gt; &lt;h5&gt;Confirmation&lt;/h5&gt;
&lt;Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" /&gt; &lt;Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" /&gt;
&lt;Dialog header="Confirmation" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true"&gt; &lt;Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true"&gt;
&lt;div class="confirmation-content"&gt; &lt;div class="confirmation-content"&gt;
&lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt; &lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt;
&lt;span&gt;Are you sure you want to proceed?&lt;/span&gt; &lt;span&gt;Are you sure you want to proceed?&lt;/span&gt;
@ -317,7 +318,7 @@ export default {
&lt;h5&gt;Maximizable&lt;/h5&gt; &lt;h5&gt;Maximizable&lt;/h5&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /&gt;
&lt;Dialog header="Header" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"&gt; &lt;Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"&gt;
&lt;p class="p-m-0"&gt;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 &lt;p class="p-m-0"&gt;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.&lt;/p&gt; Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
@ -345,12 +346,12 @@ export default {
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;Dialog header="Header" :visible.sync="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"&gt; &lt;Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true"&gt;
&lt;p class="p-m-0"&gt;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 &lt;p class="p-m-0"&gt;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.&lt;/p&gt; Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;template #footer&gt; &lt;template #footer&gt;
&lt;Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-text"/&gt; &lt;Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-text" /&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closePosition" autofocus /&gt; &lt;Button label="Yes" icon="pi pi-check" @click="closePosition" autofocus /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
@ -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>