1404/11/04- first

src/components/BasicModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <a-modal
+      v-model:visible="localValue"
+      :title="props.title"
+      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">
+//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
+}
+
+const props = withDefaults(defineProps<Prop>(), {
+  visible: false,
+  cancelText: 'انصراف',
+  okText: 'ثبت',
+  customFooter: false,
+  confirmLoading: false,
+  loading: false,
+  wrapClassName: ''
+})
+
+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>