<template>
  <div class="hello">
    <h1>Modal Samples</h1>
    <bs-modal ref="bodyOnlyModalRef" class="fade">
      <h1>Body</h1>
    </bs-modal>
    <button type="button" class="btn btn-primary" v-on:click="showModal()">Show Modal</button>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue';
import {BsModal} from "bs-modal-vue";
export default defineComponent({
  name: 'HelloWorld',
  setup(){
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const bodyOnlyModalRef = ref<any>(null);
    return{
      bodyOnlyModalRef,
      showModal(){
        bodyOnlyModalRef.value?.showModal();
      }
    }
  },
  components:{
    BsModal
  }
});
</script>

<bs-modal>
    <h1>Body</h1>
  <template v-slot:footer>
    <h1>Footer</h1>
  </template>
</bs-modal>

<bs-modal data-bs-backdrop="static">
  <h1> Static Backdrop</h1>
</bs-modal>