BKWLD / vue-modal

A component that renders a modal window with slotted content. Includes trapped tabbing for ADA compliance
MIT License
1 stars 0 forks source link

Vue Modal

A component that renders a modal window with slotted content. Includes trapped tabbing for ADA compliance

Props

Events

MountOnBody Function

You'll use this function to add your modal to the page.

MountOnBody is an async function that:

The arguments are:

Usage:

import mountOnBody from '@bkwld/vue-modal/helpers'
import WelcomeModal from './welcome-modal.vue'
@welcomeModalRef = await mountOnBody WelcomeModal, propsData: modalTitle: "Hello world"

Usage (Open on mount, remove on close)

This is the default behavior.

How it works:

welcome-modal.vue

vue-modal(@destroyed='destroyed')
    template(#default='{close}')
        h2 {{ modalTitle }}
        button(@click='close') Close modal
import VueModal from '@bkwld/vue-modal'
import '@bkwld/vue-modal/index.css'
export default
    components: { VueModal }
    props: modalTitle: String
    methods: 
        # Destroy WelcomeModal when VueModal is destroyed
        destroyed: -> @$destroy()

home.vue

    h2 Homepage
    button(@click='openModal') Open modal
import mountOnBody from '@bkwld/vue-modal/helpers'
export default
    data: -> modalTitle: 'Welcome to our website!'
    methods:
        openModal: -> await mountOnBody WelcomeModal, propsData: modalTitle: @modalTitle

Usage (Don't open on mount, don't remove on close)

In some cases, maybe you'll want to mount the modal immediately when your app mounts, but not open it until later, and not destroy it when it's closed.

How it works:

welcome-modal.vue

vue-modal(
    ref='modal'
    :open-on-mount='false'
    :remove-on-close='false')
    template(#default='{close}')
        h2 {{ modalTitle }}
        button(@click='close') Close modal
import VueModal from '@bkwld/vue-modal'
import '@bkwld/vue-modal/index.css'
export default
    components: { VueModal }
    props: modalTitle: String
    methods:
        open: -> @$refs.modal.open()
        close: -> @$refs.modal.close()

home.vue

h2 Homepage
button(@click='openModal') Open modal
import mountOnBody from '@bkwld/vue-modal/helpers'
export default
    data: -> modalTitle: 'Welcome to our website!'
    mounted: ->
        @welcomeModalRef = await mountOnBody WelcomeModal, propsData: modalTitle: @modalTitle
    methods:
        openModal: -> @welcomeModalRef.open()

Usage with all options

welcome-modal.vue

vue-modal(

    //- Ref so you can call component methods (open, close, destroy)
    ref='modal'

    //- Props
    :closeable='true'
    :open-on-mount='true'
    :remove-on-close='true'
    transition='slide-up'
    type='compact'

    //- Events
    @open='onOpen'
    @close='onClose'
    @after-leave='afterLeave'
    @destroyed='destroyed')

    //- Default slot
    //- Slot props: open (function), close (function), isOpen (boolean)
    template(#default='{ open, close, isOpen }')

        h2 This modal is {{ isOpen ? 'open' : 'closed' }}

        button(@click='close') Close modal

To-Do