modal positions updated

This commit is contained in:
Cihan Şentürk 2022-06-07 16:53:15 +03:00
parent c94ab51c52
commit 4094e46d68
2 changed files with 15 additions and 10 deletions

View File

@ -1,8 +1,8 @@
<template> <template>
<SlideYUpTransition :duration="animationDuration"> <SlideYUpTransition :duration="animationDuration">
<div class="modal fade w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade items-center justify-center" <div class="modal fade w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade justify-center"
@click.self="closeModal" @click.self="closeModal"
:class="[{'show flex flex-wrap modal-background': show}, {'hidden': !show}]" :class="[modalPositionTop ? 'items-start' : 'items-center', {'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
v-show="show" v-show="show"
tabindex="-1" tabindex="-1"
role="dialog" role="dialog"
@ -103,6 +103,11 @@ export default {
default: 800, default: 800,
description: "Modal transition duration" description: "Modal transition duration"
}, },
modalPositionTop: {
type: Boolean,
default: false,
description: "Modal Body position Class"
},
}, },
data() { data() {

View File

@ -1,8 +1,8 @@
<template> <template>
<SlideYUpTransition :duration="animationDuration"> <SlideYUpTransition :duration="animationDuration">
<div class="modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade items-center justify-center" <div class="modal w-full h-full fixed top-0 left-0 right-0 z-50 overflow-y-auto overflow-hidden modal-add-new fade justify-center"
@click.self="closeModal" @click.self="closeModal"
:class="[{'show flex flex-wrap modal-background': show}, {'hidden': !show}]" :class="[modalPositionTop ? 'items-start' : 'items-center', {'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
v-show="show" v-show="show"
tabindex="-1" tabindex="-1"
role="dialog" role="dialog"
@ -91,19 +91,16 @@ export default {
props: { props: {
show: Boolean, show: Boolean,
is_component: Boolean, is_component: Boolean,
title: { title: {
type: String, type: String,
default: '', default: '',
description: "Modal header title" description: "Modal header title"
}, },
message: { message: {
type: String, type: String,
default: '', default: '',
description: "Modal body message" description: "Modal body message"
}, },
buttons: { buttons: {
type: Object, type: Object,
default: function () { default: function () {
@ -120,18 +117,21 @@ export default {
}, },
description: "Modal footer button" description: "Modal footer button"
}, },
animationDuration: { animationDuration: {
type: Number, type: Number,
default: 800, default: 800,
description: "Modal transition duration" description: "Modal transition duration"
}, },
modalDialogClass: {
modalDialogClass: {
type: String, type: String,
default: '', default: '',
description: "Modal Body size Class" description: "Modal Body size Class"
}, },
modalPositionTop: {
type: Boolean,
default: false,
description: "Modal Body position Class"
},
}, },
data() { data() {