akaunting 3.0 (the last dance)
This commit is contained in:
Burak Civan
@ -1,37 +1,43 @@
|
||||
<template>
|
||||
<SlideYUpTransition :duration="animationDuration">
|
||||
<div class="modal fade"
|
||||
<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"
|
||||
@click.self="closeModal"
|
||||
:class="[{'show d-block': show}, {'d-none': !show}]"
|
||||
:class="[{'show flex flex-wrap modal-background': show}, {'hidden': !show}]"
|
||||
v-show="show"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
:aria-hidden="!show">
|
||||
<div class="modal-dialog" :class="modalDialogClass">
|
||||
<div class="w-full my-10 m-auto flex flex-col" :class="modalDialogClass ? modalDialogClass : 'max-w-screen-sm'">
|
||||
<slot name="modal-content">
|
||||
<div class="modal-content">
|
||||
<div class="card-header pb-2">
|
||||
<slot name="card-header">
|
||||
<h4 class="float-left"> {{ title }} </h4>
|
||||
<div class="p-5 bg-body rounded-tl-lg rounded-tr-lg">
|
||||
<div class="flex items-center justify-between border-b pb-5">
|
||||
<slot name="card-header">
|
||||
<h4 class="text-base font-medium">
|
||||
{{ title }}
|
||||
</h4>
|
||||
|
||||
<button type="button" class="close" @click="onCancel" aria-hidden="true">×</button>
|
||||
</slot>
|
||||
<button type="button" class="text-lg" @click="onCancel" aria-hidden="true">
|
||||
<span class="rounded-md border-b-2 px-2 py-1 text-sm bg-gray-100">esc</span>
|
||||
</button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot name="modal-body">
|
||||
<div class="modal-body" v-html="message">
|
||||
</div>
|
||||
<div class="py-1 px-5 bg-body" v-html="message"></div>
|
||||
</slot>
|
||||
|
||||
<div class="card-footer border-top-0 pt-0">
|
||||
<div class="p-5 bg-body rounded-bl-lg rounded-br-lg border-gray-300">
|
||||
<slot name="card-footer">
|
||||
<div class="float-right">
|
||||
<button type="button" class="btn btn-outline-secondary" @click="onCancel">
|
||||
{{ button_cancel }}
|
||||
<div class="flex items-center justify-end">
|
||||
<button type="button" class="px-6 py-1.5 ltr:mr-2 rtl:ml-2 hover:bg-gray-200 rounded-lg" @click="onCancel">
|
||||
{{ button_cancel }}
|
||||
</button>
|
||||
|
||||
<button :disabled="form.loading" type="button" class="btn btn-danger button-submit" @click="onConfirm">
|
||||
<div class="aka-loader"></div><span>{{ button_delete }}</span>
|
||||
<button :disabled="form.loading" type="button" class="relative flex items-center justify-center bg-red hover:bg-red-700 px-6 py-1.5 text-base rounded-lg disabled:opacity-50 text-white" @click="onConfirm">
|
||||
<i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
|
||||
<span :class="[{'opacity-0': form.loading}]">{{ button_delete }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</slot>
|
||||
@ -45,7 +51,7 @@
|
||||
|
||||
<script>
|
||||
import { SlideYUpTransition } from "vue2-transitions";
|
||||
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
|
||||
import AkauntingRadioGroup from './AkauntingRadioGroup';
|
||||
import AkauntingSelect from './AkauntingSelect';
|
||||
import AkauntingDate from './AkauntingDate';
|
||||
import AkauntingRecurring from './AkauntingRecurring';
|
||||
@ -64,7 +70,9 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
show: Boolean,
|
||||
show: {
|
||||
type: Boolean,
|
||||
},
|
||||
modalDialogClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
@ -94,7 +102,7 @@ export default {
|
||||
type: Number,
|
||||
default: 800,
|
||||
description: "Modal transition duration"
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -112,8 +120,22 @@ export default {
|
||||
if (this.show) {
|
||||
let documentClasses = document.body.classList;
|
||||
|
||||
documentClasses.add("modal-open");
|
||||
documentClasses.add("overflow-hidden");
|
||||
}
|
||||
|
||||
if (this.modalDialogClass) {
|
||||
let modal_size = this.modalDialogClass.replace('modal-', 'max-w-screen-');
|
||||
|
||||
this.modalDialogClass = modal_size;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('keyup',(e) => {
|
||||
if (e.key === 'Escape') {
|
||||
this.onCancel();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -131,7 +153,7 @@ export default {
|
||||
onCancel() {
|
||||
let documentClasses = document.body.classList;
|
||||
|
||||
documentClasses.remove("modal-open");
|
||||
documentClasses.remove("overflow-hidden");
|
||||
|
||||
this.$emit("cancel");
|
||||
}
|
||||
@ -142,21 +164,11 @@ export default {
|
||||
let documentClasses = document.body.classList;
|
||||
|
||||
if (val) {
|
||||
documentClasses.add("modal-open");
|
||||
documentClasses.add("overflow-hidden");
|
||||
} else {
|
||||
documentClasses.remove("modal-open");
|
||||
documentClasses.remove("overflow-hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.modal.show {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-md {
|
||||
max-width: 650px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
Reference in New Issue
Block a user