127 lines
2.9 KiB
Vue
127 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="modal fade show"
|
||
|
|
id="base-modal"
|
||
|
|
tabindex="-1"
|
||
|
|
aria-labelledby="base-modal"
|
||
|
|
aria-modal="true"
|
||
|
|
role="dialog"
|
||
|
|
style="padding-right: 17px; display: block"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
|
||
|
|
:class="modalSize"
|
||
|
|
:style="{ overflow: $attrs.overflow, width: $attrs.width }"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="modal-content"
|
||
|
|
:style="{ height: $attrs.height, maxHeight: $attrs.maxHeight }"
|
||
|
|
>
|
||
|
|
<div class="modal-header">
|
||
|
|
<div class="" style="width: 90%">
|
||
|
|
<h5 class="modal-title">
|
||
|
|
{{ modalTitle }}
|
||
|
|
</h5>
|
||
|
|
<p
|
||
|
|
v-if="$attrs.description"
|
||
|
|
class="text-truncate mt-1"
|
||
|
|
style="width: 100%; color: rgb(167, 160, 152)"
|
||
|
|
>
|
||
|
|
{{ $attrs.description }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
@click.prevent="close()"
|
||
|
|
type="button"
|
||
|
|
class="close"
|
||
|
|
data-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
>
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<!-- <component
|
||
|
|
v-if="getComponentName?.length"
|
||
|
|
:is="getComponentName"
|
||
|
|
></component> -->
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
<div v-if="hasFooter" class="modal-footer">
|
||
|
|
<button
|
||
|
|
v-if="showCloseButton"
|
||
|
|
@click.prevent="close()"
|
||
|
|
type="button"
|
||
|
|
class="btn btn-secondary"
|
||
|
|
data-dismiss="modal"
|
||
|
|
>
|
||
|
|
بستن
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
v-if="showSaveButton"
|
||
|
|
@click.prevent="save()"
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
>
|
||
|
|
ذخیره
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { mapState, mapActions } from "pinia";
|
||
|
|
import { useCommonStore } from "~/stores/commonStore";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
modalSize: {
|
||
|
|
//.modal-sm 300px
|
||
|
|
//None 500px
|
||
|
|
//.modal-lg 800px
|
||
|
|
//.modal-xl 1140px
|
||
|
|
default: "modal-xl",
|
||
|
|
},
|
||
|
|
hasFooter: {
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
modalTitle: {
|
||
|
|
default: "",
|
||
|
|
},
|
||
|
|
showSaveButton: {
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
showCloseButton: {
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
sub_Title: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(useCommonStore, ["getComponentName"]),
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
...mapActions(useCommonStore, ["SHOW_BASE_MODAL"]),
|
||
|
|
close() {
|
||
|
|
// this.SHOW_BASE_MODAL(false);
|
||
|
|
this.$emit("close");
|
||
|
|
},
|
||
|
|
save() {
|
||
|
|
// this.SHOW_BASE_MODAL(false);
|
||
|
|
this.$emit("save");
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.modal .modal-dialog .modal-content .modal-header .close {
|
||
|
|
padding: 1em 1em;
|
||
|
|
margin: -1rem auto -1rem -1rem;
|
||
|
|
}
|
||
|
|
</style>
|