Overlay

Overlay is used to mount components on top of the current UI.

Setup

First, you must tell your Vue application to use the CiOverlayPlugin. Create a file called ci-overlay.js in a /plugins directory.

ci-overlay.js

import Vue from 'vue'
import { CiOverlayPlugin } from '@ci/stratus-components'

Vue.use(CiOverlayPlugin)

Then use this plugin in your app.

plugins: [
  '~plugins/ci-overlay.js'
],

Opening an Overlay

Now that your overlay plugin is setup, you can tell it to show a vue component in the overlay.

<template>
  <ci-button @click="openOverlay">
    Open Overlay
  </ci-button>
</template>

<script lang="ts">
import OverlayDemoModal from './OverlayDemoModal.vue'

export default {
  methods: {
    openOverlay() {
      this.$overlay.show(OverlayDemoModal)
    },
  },
}
</script>

Props and Callbacks

You can also pass props and callbacks to the component you open in an overlay.

<template>
  <ci-button @click="openOverlay">
    Open Overlay
  </ci-button>
</template>

<script lang="ts">
import OverlayDemoModal from './OverlayDemoModal.vue'

export default {
  methods: {
    openOverlay() {
      this.$overlay.show(OverlayDemoModal,
        { text: 'My overlay is awesome'},
        { callback: this.runCallback })
    },
    runCallback() {
      alert('Callback');
    }
  },
}
</script>

OverlayDemoModal.vue

<template>
  <div>
    <h1>{{ text }}</h1>
    <ci-button @click="clickButton">Click me</ci-button>
    <ci-button variant="brand-text" @click="handleClose">Close</ci-button>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  methods: {
    clickButton() {
      this.$emit('callback')
    },
    handleClose() {
      this.$emit('close');
    },
  }
}
</script>