Usage

Default

The modal component requires a unique modal-id prop and uses v-model:is-open to control visibility. Use the named slots (header, body, footer) to add content.

<script setup lang="ts">
import { ref } from 'vue'
import { CLButton, CLColors, CLModal, CLText, CLTextTypes } from '@codeandfunction/callaloo'

const showModal = ref(false)
</script>

<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal</CLButton>
  <CLModal
    modal-id="default-modal"
    v-model:is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This is the modal body content. Click outside the modal or press ESC to close it.
      </CLText>
    </template>
  </CLModal>
</template>

With Title

Use the title prop to add a header to the modal.

<script setup lang="ts">
import { ref } from 'vue'
import { CLButton, CLColors, CLModal, CLText, CLTextTypes } from '@codeandfunction/callaloo'

const showModal = ref(false)
</script>

<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal with Title</CLButton>
  <CLModal
    modal-id="title-modal"
    title="Modal Title"
    v-model:is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal has a title in the header section.
      </CLText>
    </template>
  </CLModal>
</template>

Custom Header, Body, and Footer

Use the header, body, and footer named slots to customize the modal content.

<script setup lang="ts">
import { ref } from 'vue'
import { CLButton, CLColors, CLColorVariants, CLModal, CLText, CLTextTypes } from '@codeandfunction/callaloo'

const showModal = ref(false)
</script>

<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal with Custom Content</CLButton>
  <CLModal
    modal-id="custom-content-modal"
    v-model:is-open="showModal"
    :on-close="() => showModal = false">
    <template #header>
      <CLText :type="CLTextTypes.Heading">Custom Header Content</CLText>
    </template>
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal uses custom slots for header, body, and footer sections.
      </CLText>
    </template>
    <template #footer>
      <div class="flex-grid">
        <CLButton :color="CLColors.Neutral" :variant="CLColorVariants.Outline" @click="showModal = false">Cancel</CLButton>
        <CLButton :color="CLColors.Primary" @click="showModal = false">Confirm</CLButton>
      </div>
    </template>
  </CLModal>
</template>

Fullscreen

Use the fullscreen prop to make the modal span the full width and height of the viewport.

<script setup lang="ts">
import { ref } from 'vue'
import { CLButton, CLColors, CLModal, CLText, CLTextTypes } from '@codeandfunction/callaloo'

const showModal = ref(false)
</script>

<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Fullscreen Modal</CLButton>
  <CLModal
    modal-id="fullscreen-modal"
    title="Fullscreen Modal"
    :fullscreen="true"
    v-model:is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal takes up the entire viewport.
      </CLText>
    </template>
  </CLModal>
</template>

Non-Dismissible

Set dismissible to false to prevent the modal from closing when clicking outside or pressing ESC.

<script setup lang="ts">
import { ref } from 'vue'
import { CLButton, CLColors, CLModal, CLText, CLTextTypes } from '@codeandfunction/callaloo'

const showModal = ref(false)
</script>

<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Non-Dismissible Modal</CLButton>
  <CLModal
    modal-id="non-dismissible-modal"
    title="Non-Dismissible Modal"
    :dismissible="false"
    v-model:is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal can only be closed using the close button.
      </CLText>
    </template>
  </CLModal>
</template>

Without Close Button

Set close to false to hide the close button.

<script setup lang="ts">
import { ref } from 'vue'
import { CLButton, CLColors, CLModal, CLText, CLTextTypes } from '@codeandfunction/callaloo'

const showModal = ref(false)
</script>

<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal Without Close Button</CLButton>
  <CLModal
    modal-id="no-close-modal"
    title="No Close Button"
    :close="false"
    v-model:is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal doesn't display a close button. Click outside to dismiss.
      </CLText>
    </template>
  </CLModal>
</template>

Border Radius

Use the border-radius prop to customize the modal's border radius.

<script setup lang="ts">
import { ref } from 'vue'
import { CLBorderRadius, CLButton, CLColors, CLModal, CLText, CLTextTypes } from '@codeandfunction/callaloo'

const showModal = ref(false)
</script>

<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal with Custom Border Radius</CLButton>
  <CLModal
    modal-id="border-radius-modal"
    title="Custom Border Radius"
    :border-radius="CLBorderRadius.Large"
    v-model:is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal has a large border radius.
      </CLText>
    </template>
  </CLModal>
</template>

Max Width

Use the max-width prop to customize the modal's maximum width. The default is 640px.

<script setup lang="ts">
import { ref } from 'vue'
import { CLButton, CLColors, CLModal, CLText, CLTextTypes } from '@codeandfunction/callaloo'

const showModal = ref(false)
</script>

<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal with Custom Max Width</CLButton>
  <CLModal
    modal-id="max-width-modal"
    title="Custom Max Width"
    max-width="900px"
    v-model:is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal has a maximum width of 900px.
      </CLText>
    </template>
  </CLModal>
</template>

Props