CnDeleteDialog

Two-phase single-item delete confirmation dialog. Shows a warning, waits for API response, then shows success or error.

Try it

Loading CnDeleteDialog playground…

Wraps: NcDialog, NcButton, NcNoteCard, NcLoadingIcon

Live demo

<template>
  <div>
    <button @click="open = true" style="padding: 6px 16px; border-radius: 4px; background: var(--color-primary-element); color: white; border: none; cursor: pointer;">Delete item</button>
    <CnDeleteDialog
      v-if="open"
      ref="dlg"
      :item="{ id: 1, title: 'Annual Report 2024' }"
      @confirm="onConfirm"
      @close="open = false" />
  </div>
</template>
<script>
export default {
  data() { return { open: false } },
  methods: {
    async onConfirm(id) {
      await new Promise(r => setTimeout(r, 800))
      this.$refs.dlg.setResult({ success: true })
    },
  },
}
</script>

Props

Prop	Type	Default	Description
item	Object	(required)	Item to delete (must have id)
nameField	String	'title'	Field used as display name
nameFormatter	Function	null	Optional function (item) => string to format the display name. Overrides nameField when provided.
dialogTitle	String	'Delete Item'
warningText	String	'Are you sure...'	Supports \{name\} placeholder
successText	String	'Item successfully deleted.'
cancelLabel	String		Cancel button label
closeLabel	String		Close button label
confirmLabel	String		Confirm button label

Events

Event	Payload	Description
confirm	id	Delete confirmed by user
close	—	Dialog closed

Public Methods

Method	Description
setResult(\{ success?, error? \})	Set operation result after API call

Custom Name Formatting

When items don't have a simple name field, use nameFormatter to build a display name from any item properties:

<CnDeleteDialog
  :item="auditTrail"
  :name-formatter="(item) => t('myapp', 'Audit Trail #{id}', { id: item.id })"
  @confirm="onDeleteConfirm"
  @close="deleteItem = null" />

Two-Phase Pattern

<template>
  <CnDeleteDialog
    v-if="deleteItem"
    ref="deleteDialog"
    :item="deleteItem"
    @confirm="onDeleteConfirm"
    @close="deleteItem = null" />
</template>

<script>
export default {
  methods: {
    async onDeleteConfirm(id) {
      try {
        await api.delete(id)
        this.$refs.deleteDialog.setResult({ success: true })
      } catch (error) {
        this.$refs.deleteDialog.setResult({ error: error.message })
      }
    },
  },
}
</script>

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnDeleteDialog.vue and update automatically whenever the component changes.

Props

Name	Type	Required	Default	Description
item	object	✓	—	The item to delete. Must have an id property.
nameField	string		'title'	Property name used for display (e.g., 'title', 'name')
nameFormatter	func		null	Optional function to format the item name. Receives the item, returns a string. Overrides nameField when provided.
dialogTitle	string		() => t('nextcloud-vue', 'Delete item')	Dialog title
warningText	string		() => t('nextcloud-vue', 'Are you sure you want to permanently delete "\{name\}"? This action cannot be undone.')	Warning text. Use {name} as placeholder for the item name.
successText	string		() => t('nextcloud-vue', 'Item successfully deleted.')	Success message
cancelLabel	string		() => t('nextcloud-vue', 'Cancel')	Label for the cancel button (visible before the delete runs).
closeLabel	string		() => t('nextcloud-vue', 'Close')	Label for the close button (visible after delete completes).
confirmLabel	string		() => t('nextcloud-vue', 'Delete')	Label for the primary confirm button that triggers the delete.

Events

Name	Payload	Description
close	—
confirm	—

Methods

Name	Description
setResult	Set the result of the delete operation. Call this from the parent after the API call completes.