Dialogs

Nodewood wraps PrimeVue's dialog system (opens new window) to create dialogs, which are Vue components stored in a feature's ui/dialogs folder. The simplest possible dialog looks like:

<template>
  <Dialog
    :visible="visible"
    header="Your results"
  >
    <div class="dialog-body">
      Your results are positive.  Congratulations!
    </div>

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

<script setup>
import { ref } from 'vue';

const visible = ref(false);
const openDialog = () => {
  visible.value = true;
};
const closeDialog = () => {
  visible.value = false;
};

defineExpose({ openDialog, closeDialog });
</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 setup>
import AlertResultsDialog from '#features/results/ui/dialogs/AlertResultsDialogDialog';
</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. (e.g.: nodewood add:dialog scheduling calendar to add CalendarDialog to the scheduling feature.)