# Dialogs

Nodewood comes with a built-in modal dialog system. Dialogs use vue-js-modal and are Vue components stored in a feature's ui/dialogs folder. The simplest possible dialog looks like:

<template>
  <modal
    name="alert-results-dialog"
    width="50%"
    height="auto"
  >
    <div class="dialog-wrapper padded">
      <h1
        slot="title"
        class="dialog-title"
      >
        Your results
      </h1>

      <div class="dialog-body">
        Your results are positive.  Congratulations!
      </div>

      <div class="dialog-buttons">
        <button @click="closeDialog">
          Close
        </button>
      </div>
    </div>
  </modal>
</template>

<script>
export default {
  name: 'AlertResultsDialog',

  methods: {
    /**
     * Opens the dialog to display the terms of service.
     */
    openDialog() {
      this.$modal.show('alert-results-dialog');
    },

    /**
     * Close the dialog.
     */
    closeDialog() {
      this.$modal.hide('alert-results-dialog');
    },
  },
};
</script>

This dialog would be included and used in a parent page like so:

<template>
  <div>
    <button
      @click="$refs.alertResultsDialog.openDialog()"
    >
      Show Results
    </button>

    <alert-results-dialog ref="alertResultsDialog" />
  </div>
</template>

<script>
import AlertResultsDialog from '#features/results/ui/dialogs/AlertResultsDialogDialog';

export default {
  name: 'ResultsPage',

  components: {
    AlertResultsDialog,
  },
};
</script>

Since @click must be a function, if you wanted to open a dialog with a parameter, say a user ID when iterating over a list of users, you would have to modify your button as follows:

<button
  @click="() => $refs.alertResultsDialog.openDialog(user.id)"
>
  Show Results
</button>

# Adding a new dialog

To add a new dialog with some sample code to get you rolling, run:

nodewood add dialog FEATURE NAME

Replace FEATURE with the name of the feature you wish to add a dialog for, and NAME with the name of the dialog you wish to create.