BToast setup conversion

Author: issayah

src/components/BToast/BToast.vue

@@ -26,7 +26,6 @@ const MIN_DURATION = 5000
 
 export default defineComponent({
   name: 'BToast',
-  emits: ['destroyed', 'update:modelValue'],
   props: {
     ...BLINK_PROPS,
     delay: {type: Number, default: 5000},
@@ -50,7 +49,7 @@ export default defineComponent({
     toastClass: {type: Array as PropType<Array<string>>},
     variant: {type: String as PropType<ColorVariant>},
   },
-
+  emits: ['destroyed', 'update:modelValue'],
   setup(props, {emit, slots}) {
     const isTransitioning = ref(false)
     const isHiding = ref(false)

src/components/BToast/BToaster.vue

@@ -7,31 +7,29 @@
       v-model="toast.options.value"
       :title="toast.content.title"
       :body="toast.content.body"
-      :component="toast.content.vnode"
+      :component="toast.content.body"
       :variant="toast.options.variant"
       @destroyed="handleDestroy"
     >
     </b-toast>
   </div>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  nextTick,
-  onMounted,
-  PropType,
-  reactive,
-  Ref,
-  ref,
-  toRefs,
-  ToRefs,
-  watch,
-} from 'vue'
-import {ToastInstance} from './plugin'
-import type {ContainerPosition} from '../../types'
+<script setup lang="ts">
+// import type {BToasterProps} from '@/types/components'
+import {computed} from 'vue'
+import type {ContainerPosition} from '@/types'
+import type {ToastInstance} from '@/components/BToast/plugin'
+
+interface BToasterProps {
+  position?: ContainerPosition
+  instance: ToastInstance
+  // appendToast?: boolean
+}
+
+const props = withDefaults(defineProps<BToasterProps>(), {
+  position: 'top-right',
+})
 
 const toastPositions = {
   'top-left': 'top-0 start-0',
@@ -45,26 +43,10 @@ const toastPositions = {
   'bottom-right': 'bottom-0 end-0',
 }
 
-export default defineComponent({
-  name: 'BToaster',
-  props: {
-    position: {type: String as PropType<ContainerPosition>, default: 'top-right'},
-    instance: {type: Object as PropType<ToastInstance>},
-    // appendToast: {type: Boolean, default: false},
-  },
+const positionClass = computed(() => toastPositions[props.position])
 
-  setup(props, {emit}) {
-    const positionClass = computed(() => toastPositions[props.position])
-
-    const handleDestroy = (id: string) => {
-      //we made want to disable reactivity for deletes. Future Note
-      props.instance?.remove(id)
-    }
-    return {
-      positionClass,
-      handleDestroy,
-    }
-  },
-  computed: {},
-})
+const handleDestroy = (id: string) => {
+  //we made want to disable reactivity for deletes. Future Note
+  props.instance?.remove(id)
+}
 </script>