Modal #

<template>
  <section>
    <div class="odocs-spaced">
      <o-button
        size="medium"
        variant="primary"
        @click="isImageModalActive = true"
      >
        Open modal
      </o-button>
      <o-button
        size="medium"
        variant="primary"
        @click="isCardModalActive = true"
      >
        Open modal (clip scroll)
      </o-button>
    </div>

    <o-modal v-model:active="isImageModalActive">
      <p style="text-align: center">
        <img
          src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4"
        />
      </p>
    </o-modal>

    <o-modal v-model:active="isCardModalActive" :width="640" scroll="clip">
        <div style="padding: 10px;">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales
                leo nec convallis rutrum. Vivamus pharetra molestie arcu at dictum.
                Nulla faucibus leo eget enim egestas, in tempus justo venenatis. Duis
                dictum suscipit erat, a dapibus eros lobortis ac. Praesent tempor
                rhoncus convallis. Nullam in ipsum convallis, rutrum elit eget, dictum
                ipsum. Nunc sagittis aliquet massa. Etiam lacus sapien, eleifend non
                eros quis, finibus ornare nisl. Ut laoreet sit amet lacus non dignissim.
                Sed convallis mattis enim, sed interdum risus molestie ut. Praesent vel
                ex hendrerit, cursus lectus a, blandit felis. Nam luctus orci nec varius
                commodo.
            </p>
            <p>
                Sed vulputate metus purus, ut egestas erat congue et. Donec tellus orci,
                malesuada eget dolor sed, pellentesque bibendum nunc. In eu egestas
                diam. Integer sed congue massa. Sed a urna quam. Morbi vulputate dolor
                eleifend ligula lobortis venenatis. Aenean pellentesque risus sit amet
                faucibus molestie. Aliquam eu lorem aliquet, aliquam nulla in,
                vestibulum lorem. Donec mollis mi at sollicitudin tristique. Nullam id
                nibh pulvinar, dignissim nisl id, gravida risus. Nulla arcu elit,
                scelerisque in sollicitudin et, laoreet et metus. Aenean placerat turpis
                nec tincidunt tempus.
            </p>
        </div>
    </o-modal>
  </section>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const isImageModalActive = ref(false)
    const isCardModalActive = ref(false)

    return {
      isImageModalActive,
      isCardModalActive
    }
  }
})
</script>

<template>
  <section>
    <div class="odocs-spaced">
      <o-button size="medium" variant="primary" @click="imageModal()">
        Open modal (HTML)
      </o-button>
      <o-button size="medium" variant="primary" @click="cardModal()">
        Open modal (Component)
      </o-button>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, h } from 'vue'
import { useProgrammatic } from '@oruga-ui/oruga-next'
import ModalForm from './_modal-form.vue'

export default defineComponent({
  setup() {

    const { oruga } = useProgrammatic()

    function imageModal() {
      const vnode = h('p', { style: { 'text-align': 'center' } }, [
        h('img', { src: 'https://avatars2.githubusercontent.com/u/66300512?s=200&v=4' })
      ])
      oruga.modal.open({
        content: [vnode]
      })
    }

    function cardModal() {
      oruga.modal.open({
        component: ModalForm,
        trapFocus: true
      })
    }

    return {
      imageModal,
      cardModal
    }
  }
})
</script>

<template>
    <section>
        <div class="odocs-spaced">
            <o-button size="medium" variant="primary"
                @click="promptModal()">
                Open prompt
            </o-button>
            <o-button size="medium" variant="primary"
                @click="promptModalCloseAll()">
                Open prompt (closeAll timeout)
            </o-button>
        </div>
    </section>
</template>

<script lang="ts">
import { defineComponent, h } from 'vue'
import { useProgrammatic } from '@oruga-ui/oruga-next'
import ModalForm from './_modal-form-async.vue'

export default defineComponent({
    setup() {

        const { oruga } = useProgrammatic()

        const promptModal = async () => {
            const instance = oruga.modal.open({
                component: ModalForm,
                props: {
                    title: 'Ship sprockets?',
                    message: 'Do you really want me to ship the selected sprockets?'
                },
                trapFocus: true
            })
            // Note utilizing the promise requires Promise be supported by the browser
            // If you are running Vue 2 on IE 11 this will not be the case unless you
            // add a polyfill in your build.
            const result = await instance.promise

            oruga.notification.open({
                duration: 5000,
                message: 'Modal dialog returned ' + JSON.stringify(result),
                variant: 'info',
                position: 'top',
                closable: true
            })
        }

        const promptModalCloseAll = async () => {
            const instance = oruga.modal.open({
                component: ModalForm,
                props: {
                    title: 'Close All test',
                    message: 'There is a 3 second timeout that will close all programmatic modals'
                },
                trapFocus: true
            })

            setTimeout(() => oruga.modal.closeAll({action:'closeAll'}), 3 * 1000)

            // Note utilizing the promise requires Promise be supported by the browser
            // If you are running Vue 2 on IE 11 this will not be the case unless you
            // add a polyfill in your build.
            const result = await instance.promise

            oruga.notification.open({
                duration: 5000,
                message: 'Modal dialog returned ' + JSON.stringify(result),
                variant: 'info',
                position: 'top',
                closable: true
            })
        }

        return {
            promptModal,
            promptModalCloseAll
        }
    }
})
</script>