Initiated Dialog Component
cagataycivici
parent
132fd943b2
commit
0a024a389c
|
|
@ -76,7 +76,7 @@
|
|||
</a>
|
||||
<div :class="{'submenuhide': activeMenuIndex !== 4, 'submenushow': activeMenuIndex === 4}">
|
||||
<div>
|
||||
<router-link to="/">● Link</router-link>
|
||||
<router-link to="/dialog">● Dialog</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
@import '../../components/card/Card.css';
|
||||
@import '../../components/checkbox/Checkbox.css';
|
||||
@import '../../components/chips/Chips.css';
|
||||
@import '../../components/dialog/Dialog.css';
|
||||
@import '../../components/dropdown/Dropdown.css';
|
||||
@import '../../components/fieldset/Fieldset.css';
|
||||
@import '../../components/inputtext/InputText.css';
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ button {
|
|||
|
||||
.p-link {
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
.p-dialog {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.p-dialog-visible {
|
||||
display: block;
|
||||
}
|
||||
.p-dialog .p-dialog-titlebar {
|
||||
padding: .5em .75em;
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
.p-dialog .p-dialog-content {
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: .5em .75em;
|
||||
background: none;
|
||||
zoom: 1;
|
||||
}
|
||||
.p-dialog-resizable .p-dialog-content {
|
||||
overflow: auto;
|
||||
}
|
||||
.p-dialog .p-resizable-handle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
position: absolute;
|
||||
font-size: .1px;
|
||||
display: block;
|
||||
cursor: se-resize;
|
||||
}
|
||||
.p-draggable .p-dialog-titlebar {
|
||||
cursor: move;
|
||||
}
|
||||
.p-dialog .p-dialog-titlebar-icons {
|
||||
float: right;
|
||||
}
|
||||
.p-dialog .p-dialog-titlebar-icons:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.p-dialog .p-dialog-titlebar-icon {
|
||||
text-decoration: none;
|
||||
padding: .125em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.p-dialog .p-dialog-titlebar-icon span {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
.p-dialog-footer {
|
||||
padding: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-dialog-mask {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ConfirmDialog */
|
||||
.p-confirmdialog {
|
||||
width: 30em;
|
||||
}
|
||||
|
||||
.p-confirmdialog.p-dialog .p-dialog-content {
|
||||
padding: 1em 2em;
|
||||
}
|
||||
.p-confirmdialog .p-dialog-content .p-confirmdialog-icon {
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
margin-right: .5em;
|
||||
}
|
||||
.p-confirmdialog .p-dialog-content .p-confirmdialog-message {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
.p-fluid .p-dialog-footer .p-button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* RTL */
|
||||
.p-rtl .p-dialog .p-dialog-titlebar-close {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.p-rtl .p-dialog .p-dialog-footer {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.p-confirmdialog {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.p-dialog-enter,
|
||||
.p-dialog-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, -25%, 0) scale(0.9);
|
||||
}
|
||||
|
||||
.p-dialog-enter-active,
|
||||
.p-dialog-leave-active {
|
||||
|
||||
transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
/* Maximize */
|
||||
.p-dialog-maximized {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
transform: none;
|
||||
width: 100vw !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-dialog-maximized .p-dialog-content {
|
||||
-webkit-transition: height .3s;
|
||||
transition: height .3s;
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<transition name="p-dialog" @enter="onEnter" @leave="onLeave">
|
||||
<div ref="container" :class="containerClass" v-if="visible">
|
||||
<div class="p-dialog-titlebar" v-if="showHeader">
|
||||
<slot name="header">
|
||||
<span class="p-panel-title" v-if="header">{{header}}</span>
|
||||
</slot>
|
||||
<div class="p-dialog-titlebar-icons">
|
||||
<button class="p-dialog-titlebar-icon p-dialog-titlebar-close p-link" @click="close" v-if="closable">
|
||||
<span class="p-dialog-titlebar-close-icon pi pi-times"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-dialog-content" :style="contentStyle">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="p-dialog-footer" v-if="footer || $slots.footer">
|
||||
<slot name="footer">{{footer}}</slot>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
visible: Boolean,
|
||||
header: null,
|
||||
footer: null,
|
||||
modal: Boolean,
|
||||
rtl: Boolean,
|
||||
contentStyle: null,
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
autoZIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
mask: null,
|
||||
methods: {
|
||||
close(event) {
|
||||
this.$emit('update:visible', false);
|
||||
},
|
||||
onEnter() {
|
||||
this.$emit('show');
|
||||
|
||||
if (this.autoZIndex) {
|
||||
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
|
||||
}
|
||||
this.focus();
|
||||
if (this.modal) {
|
||||
this.enableModality();
|
||||
}
|
||||
},
|
||||
onLeave() {
|
||||
this.$emit('hide');
|
||||
|
||||
if (this.modal) {
|
||||
this.disableModality();
|
||||
}
|
||||
},
|
||||
focus() {
|
||||
let focusable = DomHandler.findSingle(this.$refs.container, 'input,button');
|
||||
if (focusable) {
|
||||
focusable.focus();
|
||||
}
|
||||
},
|
||||
enableModality() {
|
||||
if (!this.mask) {
|
||||
this.mask = document.createElement('div');
|
||||
this.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
|
||||
DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-dialog-mask p-fadein');
|
||||
document.body.appendChild(this.mask);
|
||||
DomHandler.addClass(document.body, 'p-overflow-hidden');
|
||||
}
|
||||
},
|
||||
disableModality() {
|
||||
if (this.mask) {
|
||||
document.body.removeChild(this.mask);
|
||||
DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
||||
this.mask = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-dialog p-component', {
|
||||
'p-dialog-rtl': this.rtl
|
||||
}];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -9,6 +9,7 @@ import Card from './components/card/Card';
|
|||
import Chart from './components/chart/Chart';
|
||||
import Checkbox from './components/checkbox/Checkbox';
|
||||
import Chips from './components/chips/Chips';
|
||||
import Dialog from './components/dialog/Dialog';
|
||||
import Dropdown from './components/dropdown/Dropdown';
|
||||
import Editor from './components/editor/Editor';
|
||||
import FullCalendar from './components/fullcalendar/FullCalendar';
|
||||
|
|
@ -46,6 +47,7 @@ Vue.component('Card', Card);
|
|||
Vue.component('Chart', Chart);
|
||||
Vue.component('Checkbox', Checkbox);
|
||||
Vue.component('Chips', Chips);
|
||||
Vue.component('Dialog', Dialog);
|
||||
Vue.component('Dropdown', Dropdown);
|
||||
Vue.component('Editor', Editor);
|
||||
Vue.component('FullCalendar', FullCalendar);
|
||||
|
|
|
|||
|
|
@ -81,6 +81,11 @@ export default new Router({
|
|||
name: 'chips',
|
||||
component: () => import('./views/chips/ChipsDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/dialog',
|
||||
name: 'dialog',
|
||||
component: () => import('./views/dialog/DialogDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/dropdown',
|
||||
name: 'dropdown',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Dialog</h1>
|
||||
<p>Dialog is a container to display content in an overlay window.</p>
|
||||
</div>
|
||||
</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">
|
||||
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 slot="footer">
|
||||
<Button label="Yes" icon="pi pi-check" @click="close" />
|
||||
<Button label="No" icon="pi pi-times" @click="close" class="p-button-secondary"/>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.display = true;
|
||||
},
|
||||
close() {
|
||||
this.display = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue