<template> <!-- Modal --> <div class="modal fade" id="list-modal" tabindex="-1" aria-labelledby="list-modal-label" aria-hidden="true" > <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="list-modal-label"> {{ buttonText }} </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <list-form :selectedItem="selectedItem" :parentId="parentId" :apiName="apiName" @close-modal="closeModal" @update-list="updateList" @delete-item="deleteItem" ></list-form> </div> </div> </div> </div> </template> <script> export default { props: ["selectedItem","parentId", "apiName"], emits: ["update-list", "close-modal", "delete-item"], data() { return { fetchingData: false, }; }, computed: { buttonText() { return this.selectedItem?.id || this.selectedItem?.guid ? "بروزرسانی پوشه" : "پوشه جدید"; }, }, methods: { closeModal() { this.$emit("close-modal"); }, updateList() { this.$emit("update-list"); }, deleteItem() { this.$emit("delete-item"); }, setTab(tab) { this.currentTab = tab; }, }, }; </script> <style scoped> .modal-header .close { padding: 1rem 1rem; margin: -1rem auto -1rem -1rem; } </style>