initial: bootstrap from BukidBountyApp base

resources/js/Components/Core/BaseModal.vue

@@ -0,0 +1,97 @@
+<template>
+  <Teleport to="body">
+    <!-- modal -->
+    <div v-if="modelValue" class="modal fade show d-block" role="dialog">
+      <div class="modal-dialog">
+        <div class="modal-content">
+
+          <!-- HEADER -->
+          <div v-if="showHeader" class="modal-header">
+            <h4 class="modal-title">{{ modalTitle }}</h4>
+            <h4 class="cursor-pointer" @click="$emit('update:modelValue', false)">×</h4>
+          </div>
+
+          <!-- BODY -->
+          <div class="modal-body">
+            <slot />
+            <!-- If string, render as text; if component/VNode, render directly -->
+            <template v-if="isString">
+              <div v-html="body"></div>
+            </template>
+            <template v-else-if="body">
+              <component :is="body" />
+            </template>
+          </div>
+
+          <!-- FOOTER -->
+          <div class="modal-footer w-100">
+            <slot name="footer" />
+            <button v-if="footerClose && !$slots.footer" class="btn btn-primary w-100 py-2 rounded-3 shadow-sm fw-bold" @click="$emit('update:modelValue', false)">
+              OK
+            </button>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <!-- backdrop -->
+    <div v-if="modelValue" class="modal-backdrop fade show"></div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: Boolean,
+  modalTitle: [String, Boolean],
+  body: [String, Object], // support string or VNode/component
+  footerClose: { type: Boolean, default: true }
+})
+
+const showHeader = computed(() => props.modalTitle !== false)
+const isString = computed(() => typeof props.body === 'string')
+</script>
+
+<style scoped>
+.modal {
+  z-index: 30001;
+}
+
+.modal-content {
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-body {
+  overflow-y: auto;
+  flex: 1;
+}
+
+.modal-backdrop {
+  z-index: 30000;
+}
+
+.modal-dialog {
+  z-index: 30002;
+  margin-top: 5vh;
+}
+
+.modal-title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.modal-header h4:last-child {
+  font-size: 24px;
+  line-height: 1;
+  color: #999;
+  transition: color 0.2s;
+}
+
+.modal-header h4:last-child:hover {
+  color: #333;
+}
+</style>