Nouvelle interface

src/components/base/Modal.vue

@@ -0,0 +1,71 @@
+<script setup>
+import {Modal} from 'bootstrap'
+import {onMounted, ref, watch, useSlots, useAttrs, computed} from 'vue';
+
+//const emit = defineEmits(['open', 'close'])
+// const slots = useSlots()
+// const attrs = useAttrs()
+
+const props = defineProps({
+  show: Number,
+  hide: Number,
+  size: String,
+  needFooter: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const refModal = ref(null)
+
+const show = computed(() => {
+  return props.show
+})
+
+const hide = computed(() => {
+  return props.hide
+})
+
+let BsModal = null
+
+onMounted(() => {
+  BsModal = new Modal(refModal.value)
+})
+
+watch(show, async (to, from) => {
+  if (to > from) {
+    BsModal.show()
+  }
+})
+
+watch(hide, async (to, from) => {
+  if (to > from) {
+    BsModal.hide()
+  }
+})
+
+</script>
+
+<template>
+  <div class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" ref="refModal">
+    <div class="modal-dialog" :class="size">
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="modal-title"></slot>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <slot name="modal-body"></slot>
+        </div>
+        <div class="modal-footer" v-if="needFooter">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+          <button type="button" class="btn btn-primary">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>