Skip to main content

Modal

Source@dopt/vue

Overview​

The modal component is powered by a modal block and is great for focusing a user’s attention on important information in a dialog interface separate from the rest of the content on the page. It is typically used for welcoming users to your product or announcing feature updates.

Composables​

With our Vue SDK, you can use modals headlessly by importing the useModal composable from @dopt/vue.

useModal​

  • useModal(id: string): Modal

A Vue composable for accessing and updating a modal's state and content.

<script>
  import { useModal } from '@dopt/vue';
  import RichText from '@dopt/html-rich-text';
  const {
    id,
    title,
    body,
    completeLabel,
    dismissLabel,
    active,
    completed,
    dismissed,
    complete,
    dismiss,
  } = useModal('my-flow.four-pandas-jam');
</script>
<template>
  <div>
    <div id="states">
      <div>modal.active: {{ active }}</div>
      <div>modal.completed: {{ completed }}</div>
      <div>modal.dismissed: {{ dismissed }}</div>
    </div>
    <div id="actions">
      <button v-on:click="() => complete()">{{ completeLabel }}</button>
      <button v-on:click="() => dismiss()">{{ dismissLabel }}</button>
    </div>
    <div id="content">
      <div>modal.title: {{ title }}</div>
      <div>
        modal.body: <div v-html="RichText({ content: body })"></div>
      </div>
      <div>modal.completeLabel: {{ completeLabel }}</div>
      <div>modal.dismissLabel: {{ dismissLabel }}</div>
    </div>
  </div>
</template>

Types​

Modal state accessors and methods for updating state along with content configured in Dopt.

interface Modal {
  id: Ref<string>;

  title: Ref<string | null | undefined>;
  body: Ref<Children | null | undefined>;

  completeLabel: Ref<string | null | undefined>;
  dismissLabel: Ref<string | null | undefined>;

  active: Ref<boolean>;

  completed: Ref<boolean>;
  dismissed: Ref<boolean>;

  field: <V>(name: string) => undefined | null | V; 

  complete: () => void;
  dismiss: () => void;
}