BCollapse script setup

Author: issayah

src/components/BCollapse.vue

@@ -11,86 +11,94 @@
   </component>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, onMounted, ref, watch} from 'vue'
+<script setup lang="ts">
+// import type {BCollapseEmits, BCollapseProps} from '@/types/components'
+import {computed, onMounted, ref, watch} from 'vue'
 import Collapse from 'bootstrap/js/dist/collapse'
-import useEventListener from '../composables/useEventListener'
-import getID from '../utils/getID'
+import useEventListener from '@/composables/useEventListener'
+import getID from '@/utils/getID'
 
-export default defineComponent({
-  name: 'BCollapse',
-  props: {
-    accordion: {type: String, required: false},
-    // appear: {type: Boolean, default: false},
-    id: {type: String, default: getID()},
-    // isNav: {type: Boolean, default: false},
-    modelValue: {type: Boolean, default: false},
-    tag: {type: String, default: 'div'},
-    toggle: {type: Boolean, default: false},
-    visible: {type: Boolean, default: false},
-  },
-  emits: ['update:modelValue', 'show', 'shown', 'hide', 'hidden'],
-  setup(props, {emit}) {
-    const element = ref<HTMLElement>()
-    const instance = ref<Collapse>()
-    const classes = computed(() => ({
-      show: props.modelValue,
-    }))
+interface BCollapseProps {
+  accordion?: string
+  // appear?: Boolean
+  id?: string
+  // isNav?: Boolean
+  modelValue?: boolean
+  tag?: string
+  toggle?: boolean
+  visible?: boolean
+}
 
-    const close = () => emit('update:modelValue', false)
+const props = withDefaults(defineProps<BCollapseProps>(), {
+  id: getID(),
+  modelValue: false,
+  tag: 'div',
+  toggle: false,
+  visible: false,
+})
 
-    useEventListener(element, 'show.bs.collapse', () => {
-      emit('show')
-      emit('update:modelValue', true)
-    })
+interface BCollapseEmits {
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'show'): void
+  (e: 'shown'): void
+  (e: 'hide'): void
+  (e: 'hidden'): void
+}
 
-    useEventListener(element, 'hide.bs.collapse', () => {
-      emit('hide')
-      emit('update:modelValue', false)
-    })
+const emit = defineEmits<BCollapseEmits>()
 
-    useEventListener(element, 'shown.bs.collapse', () => emit('shown'))
-    useEventListener(element, 'hidden.bs.collapse', () => emit('hidden'))
+const element = ref<HTMLElement>()
+const instance = ref<Collapse>()
+const classes = computed(() => ({
+  show: props.modelValue,
+}))
 
-    onMounted(() => {
-      instance.value = new Collapse(element.value as HTMLElement, {
-        parent: props.accordion ? `#${props.accordion}` : undefined,
-        toggle: props.toggle,
-      })
-      if (props.visible || props.modelValue) {
-        emit('update:modelValue', true)
-        instance.value?.show()
-      }
-    })
+const close = () => emit('update:modelValue', false)
 
-    watch(
-      () => props.modelValue,
-      (value) => {
-        if (value) {
-          instance.value?.show()
-        } else {
-          instance.value?.hide()
-        }
-      }
-    )
-    watch(
-      () => props.visible,
-      (value) => {
-        if (value) {
-          emit('update:modelValue', !!value)
-          instance.value?.show()
-        } else {
-          emit('update:modelValue', !!value)
-          instance.value?.hide()
-        }
-      }
-    )
+useEventListener(element, 'show.bs.collapse', () => {
+  emit('show')
+  emit('update:modelValue', true)
+})
 
-    return {
-      element,
-      classes,
-      close,
-    }
-  },
+useEventListener(element, 'hide.bs.collapse', () => {
+  emit('hide')
+  emit('update:modelValue', false)
 })
+
+useEventListener(element, 'shown.bs.collapse', () => emit('shown'))
+useEventListener(element, 'hidden.bs.collapse', () => emit('hidden'))
+
+onMounted(() => {
+  instance.value = new Collapse(element.value as HTMLElement, {
+    parent: props.accordion ? `#${props.accordion}` : undefined,
+    toggle: props.toggle,
+  })
+  if (props.visible || props.modelValue) {
+    emit('update:modelValue', true)
+    instance.value?.show()
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value) {
+      instance.value?.show()
+    } else {
+      instance.value?.hide()
+    }
+  }
+)
+watch(
+  () => props.visible,
+  (value) => {
+    if (value) {
+      emit('update:modelValue', !!value)
+      instance.value?.show()
+    } else {
+      emit('update:modelValue', !!value)
+      instance.value?.hide()
+    }
+  }
+)
 </script>