modal positions updated
This commit is contained in:
parent
c94ab51c52
commit
4094e46d68
@ -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() {
|
||||||
|
@ -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() {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user