Pinafore-Web-Client-Frontend/src/routes/_components/dialog/components/ConfirmationDialog.html

<ModalDialog
  {id}
  {label}
  {title}
  background="var(--main-bg)"
>
  <form class="confirmation-dialog-form">
    {#if component}
      <svelte:component this={component} {...componentOpts} />
    {:else}
      <p>{text}</p>
    {/if}
    <div class="confirmation-dialog-form-flex">
      <button type="button" on:click="onPositive()">
        {positiveText}
      </button>
      <button type="button" on:click="onNegative()">
        {negativeText}
      </button>
    </div>
  </form>
</ModalDialog>
<style>
  .confirmation-dialog-form-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px 20px;
  }
  .confirmation-dialog-form-flex button {
    min-width: 125px;
  }
  .confirmation-dialog-form p {
    font-size: 1.3em;
    padding: 40px 20px;
  }
</style>
<script>
  import ModalDialog from './ModalDialog.html'
  import { show } from '../helpers/showDialog'
  import { close } from '../helpers/closeDialog'
  import { on } from '../../../_utils/eventBus'
  import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'

  export default {
    oncreate () {
      on('destroyDialog', this, this.onDestroyDialog)
      onCreateDialog.call(this)
    },
    data: () => ({
      component: undefined,
      text: undefined,
      onPositive: undefined,
      onNegative: undefined,
      title: '',
      positiveText: 'intl.okay',
      negativeText: 'intl.cancel'
    }),
    methods: {
      show,
      close,
      onDestroyDialog (thisId) {
        const {
          id,
          positiveResult,
          onPositive,
          onNegative
        } = this.get()
        if (thisId !== id) {
          return
        }
        if (positiveResult) {
          this.fire('positive')
          if (onPositive) {
            onPositive()
          }
        } else {
          this.fire('negative')
          if (onNegative) {
            onNegative()
          }
        }
      },
      onPositive () {
        this.set({ positiveResult: true })
        this.close()
      },
      onNegative () {
        this.close()
      }
    },
    components: {
      ModalDialog
    }
  }
</script>