OcModal component

Description

The OcModal component can be used to display a modal to the user. Modals are generally used to force the user to focus on confirming or completing a single action.

Every modal gets automatically added a background which spans the whole width and height. The modal itself is aligned to center both vertically and horizontally.

Examples

Default

The most common use case of the component is in combination with a button that opens the modal. A modal needs at least a title attribute.

<template>
  <oc-button @click="showModal">Show modal</oc-button>
  <oc-modal
    v-if="modalActive"
    title="Modal title"
    message="Some message."
    @confirm="confirm"
    @cancel="hideModal"
  />
</template>

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

const modalActive = ref(false)

const showModal = () => {
  modalActive.value = true
}

const hideModal = () => {
  modalActive.value = false
}

const confirm = () => {
  // handle confirm...

  modalActive.value = false
}
</script>

Input

A modal can have an input field.

<template>
  <oc-button @click="showModal">Show modal</oc-button>
  <oc-modal
    v-if="modalActive"
    title="Modal title"
    :has-input="true"
    input-label="Folder name"
    @confirm="confirm"
    @cancel="hideModal"
  />
</template>

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

const modalActive = ref(false)

const showModal = () => {
  modalActive.value = true
}

const hideModal = () => {
  modalActive.value = false
}

const confirm = (value: string) => {
  // handle confirm...

  modalActive.value = false
}
</script>

Slot

The component provides a content slot to add custom content. This can even be a dynamically loaded component.

It can also be used for displaying custom modal actions. In this case, the actions need to be implemented manually, and hide-actions needs to be set to true so the default actions stay hidden.

<template>
  <oc-button @click="showModal">Show modal</oc-button>
  <oc-modal v-if="modalActive" title="Modal title" :hide-actions="true">
    <template #content>
      <span>Your changes were not saved. Do you want to save them?</span>
      <div class="flex justify-end items-center mt-4">
        <div class="oc-modal-body-actions-grid">
          <oc-button
            class="oc-modal-body-actions-cancel ml-2"
            appearance="outline"
            @click="hideModal"
            >Cancel
          </oc-button>
          <oc-button
            class="oc-modal-body-actions-secondary ml-2"
            appearance="outline"
            @click="hideModal"
          >
            Don't Save
          </oc-button>
          <oc-button class="oc-modal-body-actions-confirm ml-2" appearance="filled" @click="confirm"
            >Save
          </oc-button>
        </div>
      </div>
    </template>
  </oc-modal>
</template>

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

const modalActive = ref(false)

const showModal = () => {
  modalActive.value = true
}

const hideModal = () => {
  modalActive.value = false
}

const confirm = () => {
  // handle confirm...

  modalActive.value = false
}
</script>

Properties

Emits

Slots