Builderall Vue UI

# BUIModalConfirm

Simple confirmation modal with callbacks support, that can be mounted through function or slot. It has two buttons: Clicking cancel it executes the onCancel() function and clicking ok it executes onSuccess().

# Demo

# Code

<template>
  <div>
    <b-button
      variant="danger"
      class="mx-1"
      @click="deleteItem()"
    >
      <bui-icon
        name="trash"
        variant="white"
      />
      Delete
    </b-button>
    <b-button
      variant="success"
      class="mx-1"
      @click="sendNotification()"
    >
      <bui-icon
        name="submit-mail"
        variant="white"
      />
      Send notification
    </b-button>

    <bui-modal-confirm ref="modal" />
  </div>
</template>

<script>
export default {
  methods: {
    deleteItem () {
      this.$refs.modal.show({
        iconName: 'trash',
        title: 'Do you really want to delete?',
        message: "If I were you I wouldn't do that ...",
        okVariant: 'danger',
        okTitle: 'Delete',
        cancelVariant: 'default',
        cancelTitle: 'Cancel',
        data: { id: 16 },
        onSuccess: (data) => alert('delete id ' + data.id),
        onCancel: (data) => alert('cancel deleting id ' + data.id)
      })
    },
    sendNotification () {
      this.$refs.modal.show({
        iconName: 'submit-mail',
        title: 'Send notification?',
        message: 'A notification will be sent to all your contacts',
        okVariant: 'success',
        okTitle: 'Send',
        onSuccess: () => alert('sending notifications...'),
        onCancel: () => alert('not send')
      })
    }
  }
}
</script>

# How to use

You must add a <bui-modal-confirm ref="modal"></bui-modal-confirm> to your application and define a ref for it. After, just open it using this.$refs.modal.show({}) sending the desired options as a parameter.

# Available options:

Key Default Description
title 'Title' Modal title
message null Modal message
okVariant 'primary' Button ok variant
okTitle 'Ok' Button ok text
cancelVariant 'default' Button cancel variant
cancelTitle 'Cancel' Button cancel text
iconName null icon that appears with the confirm button
data {} Data needed to perform callbacks. This same variable will be sent by parameter in the onSuccess and onCancel
onSuccess (data) => ({}) Callback executed when confirming
onCancel (data) => ({}) Callback executed when canceling

# Slot

If you want custom content for the modal instead of the description box, you can use the default slot.

# Demo

# Code

<template>
  <div>
    <b-button
      variant="warning"
      @click="rename()"
    >
      Renomear
    </b-button>

    <bui-modal-confirm ref="modal">
      <bui-form-group title="Digite o novo nome">
        <b-input v-model="name" />
      </bui-form-group>
    </bui-modal-confirm>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'Florinda'
    }
  },
  methods: {
    rename () {
      this.$refs.modal.show({
        iconName: 'gear',
        title: 'Renomear',
        okVariant: 'success',
        okTitle: 'Salvar',
        cancelVariant: 'default',
        cancelTitle: 'Cancelar',
        onSuccess: (data) => alert('rename to ' + this.name),
        onCancel: (data) => alert('not rename')
      })
    }
  }
}
</script>

TIP

Not needing a slot will give you the possibility to use a single ref for multiple confirmation operations

# API Reference

# Slots

Name Description
default Default content slot. If informed. options.description will have no effect

← Notifications →