Modals | Pear

v-model

This modal is controlled directly by local component state.

vue

<p-button @click="localModalOpen = true">
  Open v-model modal
</p-button>

<p-modal v-model="localModalOpen">
  <template #header>
    <h3>Local modal</h3>
  </template>

  <p>This modal is opened and closed with local state.</p>

  <template #footer="{ close }">
    <p-button variant="secondary" @click="close">Cancel</p-button>
    <p-button @click="close">Confirm</p-button>
  </template>
</p-modal>

Backdrop

vue

<p-button variant="secondary" @click="pinnedModalOpen = true">
  Open pinned modal
</p-button>

<p-modal v-model="pinnedModalOpen" :close-on-backdrop="false">
  <template #header>
    <h3>Check the details</h3>
  </template>

  <p>Backdrop clicks stay put, so the user needs to choose an action.</p>

  <template #footer="{ close }">
    <p-button @click="close">Done</p-button>
  </template>
</p-modal>

PModalProvider

Wrap your app once with PModalProvider, then call useModal() from child views or components.

Provider Setup

Put the provider near the top of the app, usually around your router view or main layout.

vue

<!-- App.vue -->
<script setup lang="ts">
import { RouterView } from "vue-router";
import { PModalProvider } from "@ontic/pear";
</script>

<template>
  <p-modal-provider>
    <RouterView />
  </p-modal-provider>
</template>

Programmatic

This one comes from the app-level provider. Since modal.open() returns a promise, you can await the user's choice.

No result yet

import { useModal } from "@ontic/pear";

const modal = useModal();

async function confirmSave() {
  const result = await modal.open({
    title: "Programmatic modal",
    description: "Choose an action and the promise resolves with its result.",
    component: MyModalBody,
    actions: [
      { label: "Cancel", variant: "secondary", action: () => "cancel" },
      { label: "Confirm", action: () => "confirm" },
    ],
  });

  if (result === "confirm") {
    await save();
  }
}

API

PModal Props

Name	Type	Default	Description
`v-model`	`boolean`	false	Controls whether the native dialog is open.
`closeOnBackdrop`	`boolean`	true	Closes the modal when the backdrop is clicked.

PModal Slots

Name	Type	Default	Description
`header`	`slot`	-	Header content. A close button is rendered automatically when this slot is present.
`default`	`{ close: () => void }`	-	Modal body content with a close slot prop.
`footer`	`{ close: () => void }`	-	Footer actions with a close slot prop.

PModal Events

Name	Type	Default	Description
`update:modelValue`	`boolean`	-	Emitted by v-model when the modal closes.
`afterClose`	`void`	-	Emitted after the native dialog close event.

Programmatic API

Name	Type	Default	Description
`PModalProvider`	`component`	-	Provides programmatic modal context to child components.
`useModal().open`	`(options: PModalOptions) => Promise<unknown>`	-	Opens a provider modal and resolves with the clicked action's return value.
`useModal().close`	`(result?: unknown) => void`	-	Closes the provider modal and optionally resolves it with a value.