vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
864 stars 95 forks source link

feat: get rid of context and made useModal can be execute everywhere #355

Closed hunterliu1003 closed 1 year ago

hunterliu1003 commented 1 year ago

Made useModal truly allowed to execute everywhere

  1. Vfm should provide a way to create a modal instance outside of setup script, like a singleton of a dynamic modal, for example:

    // modalHelpers.ts
    export const modalInstance = useModal({
      ...
    })

    and import the modalInstance from else where:

    <script lang="ts" setup>
    import { modalInstance } from './modalHelpers' 
    
    modalInstance.open()
    </script>
  2. Vfm should provide a way to create a modal that opened by default, for example:
    // modalHelpers.ts
    export const modalInstance = useModal({
      defaultModelValue: true,
      ...
    })

    and also open the modal right after create the modal instance, for example:

    // modalHelpers.ts
    export const modalInstance = useModal({
      ...
    })
    modalInstance.open()
  3. The PR also delete the context: vfm and replace it with the getActiveVfm() pattern that inspired from pinia
hunterliu1003 commented 1 year ago

Known issue: the PR made the SSR of modal broken

hunterliu1003 commented 1 year ago

Known issue: the PR made the SSR of modal broken

fixed by this commit https://github.com/vue-final/vue-final-modal/pull/355/commits/c134d8ae55c7285de7e300ce4450c6ead317fc16