boursecu_admin/src/components/BasicModal.vue

<template>
  <div>
    <a-modal
      v-model:visible="localValue"
      :title="props.title"
      :z-index="props.zIndex"
      centered
      @ok="emits('ok')"
      @cancel="emits('close')"
      @close="emits('close')"
      :confirm-loading="props.confirmLoading"
      :width="props.width"
      :ok-text="props.okText"
      :cancel-text="props.cancelText"
      :wrapClassName="props.wrapClassName"
    >
      <template v-if="props.customFooter" #footer>
        <slot name="footer" />
      </template>
      <a-spin :spinning="props.loading">
        <div class="overflow-y-auto py-2 px-1 relative max-h-[80vh]" id="body">
          <slot />
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'

//define emit
const emits = defineEmits(['ok', 'close', 'update:visible'])

//define props
interface Prop {
  visible: boolean
  title?: string
  okText?: string
  width?: string
  cancelText?: string
  customFooter?: boolean
  confirmLoading?: boolean
  loading?: boolean
  wrapClassName?: string
  zIndex?: number
}

const props = withDefaults(defineProps<Prop>(), {
  visible: false,
  cancelText: 'انصراف',
  okText: 'ثبت',
  customFooter: false,
  confirmLoading: false,
  loading: false,
  wrapClassName: '',
  zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX
})

const localValue = computed({
  get() {
    return props.visible
  },

  set(value) {
    emits('update:visible', value)
  }
})
</script>

<style>
.ant-modal-content {
  border-radius: 0.6rem;
  padding-top: 0.5rem;
}
</style>