add useModal

feat: Add useModal() and useModalController()

docs: Add useModal() and useModalController() to modal.md

Author: asika32764

apps/docs/src/docs/components/modal.md

@@ -138,3 +138,75 @@ const nestedModal1 = ref(false)
 const nestedModal2 = ref(false)
 const nestedModal3 = ref(false)
 </script>
+
+## Programmatically Control
+
+### `useModal()`
+
+You can use `useModal()` to get the closest modal in child component and hide it.
+
+```vue
+<BModal>
+  <MyComponent>
+</BModal>
+```
+
+```vue
+<template>
+  <BButton @click="hideSelf">Done</BButton>
+</template>
+
+<script setup lang="ts">
+import {useModal} from 'bootstrap-vue-next'
+
+const {hide} = useModal()
+
+function hideSelf() {
+  hide()
+}
+</script>
+```
+
+You can also provide an id to get particular modal and show/hide it. Currently, we don't support using CSS selector to
+find modal since the `BModal` in lazy mode may not render at page initial.
+
+```vue
+<template>
+  <BModal v-if="someConditions" id="my-modal"> ...</BModal>
+</template>
+
+<script setup lang="ts">
+import {useModal} from 'bootstrap-vue-next'
+import {ref} from 'vue'
+
+const someConditions = ref(...)
+
+const {show, hide, modal} = useModal('my-modal')
+
+// modal variable is BModal component ref
+if (modal.value) {
+  show()
+  hide()
+
+  modal.value.show()
+  modal.value.hide()
+} else {
+  // If modal component not exists, you can still call show/hide methods but nothing happened
+  show()
+  hide()
+}
+</script>
+```
+
+### `useModalController()`
+
+`modalController` can hide modals everywhere.
+
+```ts
+import {useModalController} from 'bootstrap-vue-next'
+
+const modalController = useModalController()
+
+modalController.hide() // Hide last modal
+modalController.hideAll() // Hide all modals at once
+```

packages/bootstrap-vue-next/src/components/BModal.vue

@@ -496,6 +496,7 @@ const sharedSlots: SharedSlotsData = reactive({
 defineExpose({
   hide,
   show: showFn,
+  id: computedId.value,
 })
 </script>
 

packages/bootstrap-vue-next/src/composables/exports/index.ts

@@ -1 +1 @@
-export {useBreadcrumb, useColorMode} from '..'
+export {useBreadcrumb, useColorMode, useModal, useModalController} from '..'

packages/bootstrap-vue-next/src/composables/index.ts

@@ -14,6 +14,8 @@ export {
 export {default as useFormInput} from './useFormInput'
 export {default as normalizeOptions} from './useFormSelect'
 export {default as useId} from './useId'
+export {default as useModal} from './useModal'
+export {default as useModalController} from './useModalController'
 export {default as useModalManager} from './useModalManager'
 export {default as useSafeScrollLock} from './useSafeScrollLock'
 export {default as useStateClass} from './useStateClass'

packages/bootstrap-vue-next/src/composables/useModal.ts

@@ -0,0 +1,43 @@
+import {type ComponentInternalInstance, computed, getCurrentInstance} from 'vue'
+import {useSharedModalStack} from './useModalManager'
+
+export default (id: string | undefined = undefined) => {
+  const {find} = useSharedModalStack()
+  const instance = getCurrentInstance()
+
+  const modalComponent = computed(() => {
+    if (id) {
+      return find(id)
+    }
+
+    if (!instance) {
+      return null
+    }
+
+    return findBModal(instance)
+  })
+
+  const modal = computed(() => modalComponent.value?.proxy)
+
+  return {
+    show(): void {
+      modalComponent.value?.exposed?.show()
+    },
+    hide(trigger = ''): void {
+      modalComponent.value?.exposed?.hide(trigger)
+    },
+    modal,
+  }
+}
+
+function findBModal(component: ComponentInternalInstance): ComponentInternalInstance | null {
+  if (!component.parent) {
+    return null
+  }
+
+  if (component.parent.type.__name === 'BModal') {
+    return component.parent
+  }
+
+  return findBModal(component.parent)
+}

packages/bootstrap-vue-next/src/composables/useModalController.ts

@@ -0,0 +1,27 @@
+import type {BModalController} from '../types'
+import {useSharedModalStack} from './useModalManager'
+
+export default (): BModalController => {
+  const {last, stack} = useSharedModalStack()
+
+  const hide = (trigger = '') => {
+    if (last.value) {
+      last.value.exposed?.hide(trigger)
+    }
+  }
+
+  const hideAll = (trigger = '') => {
+    const modals = stack.value.reverse()
+
+    for (const modal of modals) {
+      modal.exposed?.hide(trigger)
+    }
+  }
+
+  return {
+    hide,
+    hideAll,
+
+    // Todo: Supports listening events globally in the future
+  }
+}

packages/bootstrap-vue-next/src/composables/useModalManager.ts

@@ -1,16 +1,26 @@
+import {createSharedComposable, getSSRHandler, tryOnScopeDispose, unrefElement} from '@vueuse/core'
 import {
-  createSharedComposable,
-  getSSRHandler,
-  tryOnScopeDispose,
-  unrefElement,
-  useCounter,
-} from '@vueuse/core'
-import {type Ref, watch} from 'vue'
+  type ComponentInternalInstance,
+  computed,
+  getCurrentInstance,
+  ref,
+  type Ref,
+  watch,
+} from 'vue'
 
 const MODAL_OPEN_CLASS_NAME = 'modal-open'
 
-const useSharedModalCounter = createSharedComposable(() => {
-  const {count, inc, dec} = useCounter()
+export const useSharedModalStack = createSharedComposable(() => {
+  const registry: Ref<ComponentInternalInstance[]> = ref([])
+  const stack: Ref<ComponentInternalInstance[]> = ref([]) 
+  const count = computed(() => stack.value.length)
+  const last = computed(() => stack.value[stack.value.length - 1])
+  const push = (modal: ComponentInternalInstance) => stack.value.push(modal)
+  const pop = () => stack.value.pop()
+  const remove = (modal: ComponentInternalInstance): void => {
+    stack.value = stack.value.filter((item) => item.uid !== modal.uid)
+  }
+  const find = (id: string) => registry.value.find((modal) => modal.exposed!.id === id) || null
 
   const updateHTMLAttrs = getSSRHandler('updateHTMLAttrs', (selector, attribute, value) => {
     const el =
@@ -34,19 +44,27 @@ const useSharedModalCounter = createSharedComposable(() => {
     updateHTMLAttrs('body', 'class', newValue > 0 ? MODAL_OPEN_CLASS_NAME : '')
   })
 
-  return {inc, dec}
+  return {registry, stack, last, count, push, pop, remove, find}
 })
 
 export default (modalOpen: Ref<boolean>): void => {
-  const {inc, dec} = useSharedModalCounter()
+  const {registry, push, remove, stack} = useSharedModalStack()
+
+  const currentModal = getCurrentInstance()
+
+  if (!currentModal || currentModal.type.__name !== 'BModal') {
+    throw new Error('useModalManager must only use in BModal component')
+  }
+
+  registry.value.push(currentModal)
 
   watch(
     modalOpen,
     (newValue, oldValue) => {
       if (newValue) {
-        inc()
+        push(currentModal)
       } else if (oldValue && !newValue) {
-        dec()
+        remove(currentModal)
       }
     },
     {immediate: true}

packages/bootstrap-vue-next/src/types/BModalController.ts

@@ -0,0 +1,4 @@
+export interface BModalController {
+  hide: (trigger?: string) => void
+  hideAll: (trigger?: string) => void
+}

packages/bootstrap-vue-next/src/types/exports/index.ts

@@ -5,6 +5,7 @@ export type {
   AlignmentJustifyContent,
   AlignmentTextHorizontal,
   AlignmentVertical,
+  BModalController,
   BPopoverDelayObject,
   BreadcrumbItem,
   Breakpoint,

packages/bootstrap-vue-next/src/types/index.ts

@@ -6,6 +6,7 @@ export type {AlignmentTextHorizontal} from './AlignmentTextHorizontal'
 export type {AlignmentVertical} from './AlignmentVertical'
 export type {Animation} from './Animation'
 export type {AriaInvalid} from './AriaInvalid'
+export type {BModalController} from './BModalController'
 export type {BPopoverDelayObject} from './BPopoverDelayObject'
 export type {BPopoverPlacement} from './BPopoverPlacement'
 export type {BTableProvider} from './BTableProvider'